微信小程序swiper轮播点击预览效果

很多新手小白可能对轮播点击预览效果很多看不懂的，我也是踩了不少的坑，我百度了很多篇文章里面提到的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>

 

 

转载请标明出处