uniapp 小程序 图片放大预览

小程序单张uni-app图片预览

uni.previewImage({
    urls: ["/static/images/a.png"], 
        //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
    current: '', // 当前显示图片的http链接，默认是第一个
	success: function(res) {},
	fail: function(res) {},
	complete: function(res) {},
})

小程序多张图片预览

<view v-for="(item,index) in photos" :key="index">
    //点击当前图片传入索引							
	<image :src="item.pics_small_url"  @click="getImgIndex(index)"></image>					
</view>

<script>
	export default {
		data() {
			return {
				photos: [] // 存放从后台获取的数据 
			};
		},
		methods: {
			getImgIndex(index){
				console.log(index);
				//准备一个装图片路径的  数组imgs
				let imgs = this.photos.map( item =>{
                //只返回图片路径
					return item.pics_big_url  
				})
				// console.log(imgs);
                //调用预览图片的方法
				uni.previewImage({
					urls:imgs,
					current:index
				})
			}
		}
	}
</script>

使用uni.previewImage需要注意的问题

 uni.previewImage在在关闭的时候，会去调用onshow(){}这个生命周期
所以如果onshow中有接口调用的时候，需要注意一下；是否会产生数据的堆叠

noexebshowFalg:true, //控制是否会触发生命周期

data(){
    return{
        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),//['你的图片地址']
	});
},

注意 ：urls的路径只能是线上路径（https）