小程序中图片点击全屏-可滑动
在小程序中，如果页面中有多张图片，那么用户可能会习惯向在朋友圈中一样打开图片，这里微信也提供了类似的api，可以直接拿来实现这个效果。
wxml:
<view>
<block wx:for="{{arrImg}}" wx:key="{{key}}">
<image
src="{{item}}"
bindtap='previewimgs'
data-img="{{item}}"
mode="aspectFill"
></image>
</block>
</view>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
wxss:
/* perviewimg/perviewimg.wxss */
view{
text-align: center;
}
image{
width: 200rpx;
height: 200rpx;
margin: 10rpx;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
js:
// perviewimg/perviewimg.js
Page({
/**
* 页面的初始数据
*/
data: {
arrImg: ['http://images.cdn.huiur.com/files/track/2019-07-16/img/img_5d2d47e38d473.jpeg-smimage',
'http://images.cdn.huiur.com/files/track/2019-07-16/img/img_5d2d47e38d826.jpeg-smimage',
'http://images.cdn.huiur.com/files/track/2019-07-16/img/img_5d2d47e38e924.jpeg-smimage'
]
},
previewimgs: function(e) {
var currentImg = e.currentTarget.dataset.img;
console.log(currentImg);
wx.previewImage({
current: currentImg, // 当前显示图片的http链接 String
urls: this.data.arrImg // 需要预览的图片http链接列表 Array
})
},
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
微信官方文档链接：在新页面中全屏预览图片open in new window