微信小程式如何實現圖片放大預覽功能

微信小程式越來越流行，程式設計師也不斷接觸微信小程式的開發，這篇文章我們就教大家一種微信小程式：當點擊圖片時，當前圖片放大預覽，且可以左右滑動的功能。

實作方式：使用微信小程式圖片預覽介面

#我們可以看到api需要兩個參數，分別透過下面的data- list和data-src來傳到js中

wxml程式碼：

<!--图片描述-->
<view wx:if="{{item.pictures}}" class="list-dImg">
<image bindtap="imgYu" data-list="{{item.pictures}}" data-src="{{dImg}}" wx:for="{{item.pictures}}" wx:for-item="dImg" src="{{dImg}}"></image>
</view>

js程式碼：

//图片点击事件
 imgYu:function(event){
 var src = event.currentTarget.dataset.src;//获取data-src
 var imgList = event.currentTarget.dataset.list;//获取data-list
 //图片预览
 wx.previewImage({
  current: src, // 当前显示图片的http链接
  urls: imgList // 需要预览的图片http链接列表
 })
 }

##1.在圖片中新增一個點擊事件(imgYu)

2.使用event.currentTarget.dataset.自訂屬性名稱   來取得data-的值 如event.currentTarget.dataset.src  (取得data-src的值)

3.之後將取得的兩個值放到wx.previewImage介面裡面即可

跟據上面的內容我們動手操作一下，就可以實現圖片放大預覽，而且可以左右滑動，趕緊來操作一下吧。

以上是微信小程式如何實現圖片放大預覽功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！