很多新手小白可能對輪播點擊預覽效果很多看不懂的,我也是踩了不少的坑,我百度了很多篇文章里面提到的wx.previewImage中有兩個地址填寫,當前圖片地址填寫和所有要預覽的圖片的地址集合 陣列形式,在寫這個點擊效果的話,我簡單的說一下,我就直接上代碼了,
<image bindtap="previewImage" data-src='https://www.cnblogs.com/luobou/p/{{item}}' src="https://www.cnblogs.com/luobou/p/{{item.url}}" /> 在你要點擊的圖片內系結要獲取的資料和拉起事件,當然還要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='https://www.cnblogs.com/luobou/p/{{item}}' src="https://www.cnblogs.com/luobou/p/{{item.url}}" /> </swiper-item> </block> </swiper> 轉載請標明出處轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/24576.html
標籤:其他
上一篇:釘釘第三方個人應用身份驗證
下一篇:工程師的認知
