小程序uni-app图片预览uni.previewImage会触发onshow这个生命周期

小程序单张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),//['你的图片地址']
	});
},

posted @ 2021-05-10 12:32  何人陪我共长生  阅读(4597)  评论(0编辑  收藏  举报