uniapp图片预览

文章描述:

uniapp点击图片预览效果

html

<view v-for="(item,index) in detailList" :key="index">
	<image :src="item" @click="previewImage(index)"></image>
</view>

script

export default{
	data(){
		return{
			detailList:[
				'https://www.miyil.com/storage/topic/20230515/1.png',
				'https://www.miyil.com/storage/topic/20230515/2.png',
				'https://www.miyil.com/storage/topic/20230515/3.png'
			]
		}
	},
	onShow() {
		
	},
	methods:{
		//预览轮播图
		previewImage:function(index){
			var i = this.detailList; //获取当前页面的轮播图数据
			console.log(i)
			console.log(index)
			console.log(i[index])
			//uniapp预览轮播图
			uni.previewImage({
				current:index, //预览图片的下标
				urls:i //预览图片的地址,必须要数组形式,如果不是数组形式就转换成数组形式就可以
			})
		}
	}
}

 

发布时间:2023/05/15

发表评论