今天咱们看下关于小程序中,详情页图片点击放大预览效果,代码还是采用swiper组件,swiper属性参数就不多说了,上篇已经写过了。 废话就不多说了,先看下代码。
wxml代码:
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" data-src="{{item}}" bindtap="previewImage" ></image>
</swiper-item>
</block>
</swiper>
js代码:
previewImage: function (e) {
var current = e.target.dataset.src;
wx.previewImage({
current: current, // 当前显示图片的http链接
urls: this.data.imgUrls // 需要预览的图片http链接列表
})
}
最后来一张实现后的效果图:
20200418_112457.gif
这样就实现了图片放大切换预览效果,就这么点的代码就能实现效果。是不是特简单呀。