Small micro-channel program swiper Carousel Click preview

Many novice white may be broadcast on wheels Click preview many do not understand, I also stepped on a lot of the pit, I Baidu a lot of articles wx.previewImage article which mentioned two addresses to fill in, fill out the address of the current picture and address an array of all the set you want to preview the image, click on the effect of writing this, I simply say, I directly on the code,

<image bindtap="previewImage" data-src='{{item}}' src="{{item.url}}" class="slide-image"/>
You have to click in the Picture bound to get the data and pull up the event, of course, wx: for traversing Ha, I'm just starting important place, and then we went in to write a js array
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'
}
],
Then events began to write a
previewImage: function (e) {
var item = e.currentTarget.dataset.item;
var imgUrls = e.currentTarget.dataset.item;
//Picture Preview
wx.previewImage({
current: imgUrls, // http link to the currently displayed image
urls: [ 'http://i2.tiimg.com/710528/85b159126708f624.jpg', 'http://i2.tiimg.com/710528/7dbc278868e2d81b.jpg', 'http://i2.tiimg.com/ 710528 / 3ea1d72d1825c991.jpg '] // http links need to preview pictures list
})
},
Is probably the case, the picture can change their address, and then I made about wxml Code
<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>

Guess you like

Origin www.cnblogs.com/luobou/p/12580429.html