當點擊圖片時,當前圖片放大預覽,且可以左右滑動
需求:當點擊圖片時,當前圖片放大預覽,且可以左右滑動
實現(xiàn)方式:使用微信小程序圖片預覽接口
我們可以看到api需要兩個參數(shù),分別通過下面的data-list和data-src來傳到js中
wxml代碼:
1 <!--圖片描述-->
2 <view wx:if="{{item.pictures}}" class="list-dImg">
3 <image bindtap="imgYu" data-list="{{item.pictures}}" data-src="{{dImg}}" wx:for="{{item.pictures}}" wx:for-item="dImg" src="{{dImg}}"></image>
4 </view>
js代碼:
1 //圖片點擊事件
2 imgYu:function(event){
3 var src = event.currentTarget.dataset.src;//獲取data-src
4 var imgList = event.currentTarget.dataset.list;//獲取data-list
5 //圖片預覽
6 wx.previewImage({
7 current: src, // 當前顯示圖片的http鏈接
8 urls: imgList // 需要預覽的圖片http鏈接列表
9 })
10 }
1.給圖片添加一個點擊事件(imgYu)
2.使用event.currentTarget.dataset.自定義屬性名稱 來獲取data-的值 如event.currentTarget.dataset.src (獲取data-src的值)
3.之后將獲取的兩個值 放到wx.previewImage接口 里面即可
效果圖片如下:可以左右滑動上一張下一張