小程序单张uni-app图片预览
uni.previewImage({
current:0,
urls: [mess.honorIcon],//['你的图片地址']
});
小程序多张图片预览
<view class="img-boix-view">
<image class="limit-size" :src="imgcont.key" @tap="screenallView(allimgArr,imgindex)"
v-for="(imgcont,imgindex) in allimgArr" :key="imgindex">
</image>
</view>
screenallView(imgcont, index){
uni.previewImage({
current:index,
urls: imgcont.map(v=>v.key),//['你的图片地址']
});
},
使用uni.previewImage需要注意的问题
uni.previewImage在在关闭的时候,会去调用onshow(){}这个生命周期
所以如果onshow中有接口调用的时候,需要注意一下;是否会产生数据的堆叠
noexebshowFalg:true, //控制是否会触发生命周期
onShow() {
if(this.noexebshowFalg){
this.classTeacherSubjectList_api();
}
},
// 全屏
screenallView(imgcont, index){
this.noexebshowFalg=false;//不允许再次触发onshow这个声明周期
uni.previewImage({
current:index,
urls: imgcont.map(v=>v.key),//['你的图片地址']
});
},