uniapp 点击图片实现全屏预览并可以下载以及转发

uniapp 点击图片实现全屏预览并可以下载以及转发

//结构
<view class="imgs">
<image src="../../static/images/01.jpg" mode="widthFix" @click="clickImg(0)"></image>	
<image src="../../static/images/02.jpg" mode="widthFix" @click="clickImg(1)" ></image>
</view>

//函数方法
fullScreen(i) {
				wx.previewImage({
					urls: [
						"../../static/images/01.jpg",
						"../../static/images/02.jpg"
					], //需要预览的图片http链接列表,多张的时候,url直接写在后面就行了
					current: i, // 当前显示图片的http链接,默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
  • 如上是固定死的一个写法,如果有特别多的图片 每张都要这种预览效果 应该使用遍历
  • 当点击哪张图片是就将哪张图片的地址传入 函数中进行处理

你可能感兴趣的:(uniapp,移动端,uni-app)