一.image组件model属性的应用
1.不使用model的情况
代码:
<image src="../../static/tabs/contact-active.png" mode="" class="box"></image>
.box{
/* width: 750rpx; */
/* height: 750rpx; */
background-color: #007AFF;
}
图示:
可以看到默认的宽度是320px。
2.mode="aspectFit"属性
可以看到图片显示的形式又发生了改变。
图片的显示形式:
以长的变为基准往下拉知道底部。
2.mode="aspectFill"属性
图片的显示形式:
二.生命周期
1.应用的生命周期
1.onLaunch 初始化完成时触发
2.onShow 应用显示
3.onHide 应用隐藏
4.onError 应用报错
2.页面生命周期
1.onLoad 页面加载可接收参数
2.onShow 页面显示
3.onReady 监听页面初次渲染完成
4.onHide 页面隐藏
三.字体图标的使用
(1)注意点
(2)使用的过程
1.去阿里矢量图标库挑选图标
2.下载代码
3.配置文件路径
4.使用
四.图片上传和预览
(1)图片上传
代码:
<template>
<view>
<button type="default" @click="chooseImg()">图片上传</button>
<image v-for="(item,index) in imgArr" :src="item" mode=""></image>
</view>
</template>
<script>
export default {
data() {
return {
imgArr:[]
}
},
methods: {
chooseImg(){
uni.chooseImage({
count:5,//
success:res=> {
this.imgArr=res.tempFilePaths
}
})
}
}
}
</script>
<style>
</style>
2.图片预览
<template>
<view>
<button type="default" @click="chooseImg()">图片上传</button>
<image v-for="(item,index) in imgArr" @click="previeImg(item)" :src="item" mode=""></image>
</view>
</template>
<script>
export default {
data() {
return {
imgArr:[]
}
},
methods: {
chooseImg(){
uni.chooseImage({
count:5,//
success:res=> {
this.imgArr=res.tempFilePaths
}
})
},
previeImg(current){
uni.previewImage({
current:current,
urls:this.imgArr,
})
}
}
}
</script>
<style>
</style>