很多新手小白可能對輪播點擊預覽效果很多看不懂的，我也是踩了不少的坑，我百度了很多篇文章里面提到的wx.previewImage中有兩個地址填寫，當前圖片地址填寫和所有要預覽的圖片的地址集合 數組形式，在寫這個點擊效果的話，我簡單的說一下，我就直接上代碼了，
<image bindtap="previewImage" data-src='{{item}}' src="{{item.url}}" class="slide-image"/>
在你要點擊的圖片內綁定要獲取的數據和拉起事件，當然還要wx:for遍歷哈，我只是先發重要的地方，然后我們去js中寫一個數組
imgUrls: [
{
url: 'http://i2.tiimg.com/710528/85b159126708f624.jpg'
}, {
url: 'http://i2.tiimg.com/710528/7dbc278868e2d81b.jpg'
}, {
url: 'http://i2.tiimg.com/710528/3ea1d72d1825c991.jpg'
}
],
接着開始寫事件了
previewImage: function (e) {
var item = e.currentTarget.dataset.item;
var imgUrls = e.currentTarget.dataset.item;
//圖片預覽
wx.previewImage({
current:imgUrls, // 當前顯示圖片的http鏈接
urls: ['http://i2.tiimg.com/710528/85b159126708f624.jpg', 'http://i2.tiimg.com/710528/7dbc278868e2d81b.jpg', 'http://i2.tiimg.com/710528/3ea1d72d1825c991.jpg'] // 需要預覽的圖片http鏈接列表
})
},
大概就是這樣，圖片地址可以換自己的，然后我發一下wxml代碼
<swiper display-multiple-items="number" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image bindtap="previewImage" data-src='{{item}}' src="{{item.url}}" class="slide-image"/>
</swiper-item>
</block>
</swiper>
轉載請標明出處