微信小程序wx.previewImage實用案例（交流QQ羣：604788754）

本案例是能夠滑動預覽多張圖片效果。（本案例在本地配置好以後，請掃描二維碼到手機滑動預覽。在開發者工具上預覽，滑動不是很流暢）

圖片必須選擇遠程圖片，本地圖片沒法實現預覽。

或是經過wx.chooseImage上傳的圖片數組。

微信開發者工具：0.18.182200

歡迎對小程序開發有興趣的朋友加羣（604788754）交流學習。

WXML:

<block  wx:for="{{pictures}}" wx:for-item='item' wx:for-index='idx'>
  <view class="wrap">
    <image class="wramimg" src="{{item}}" data-index="{{idx}}" bindtap="previewImage"></image>
  </view>
</block>

WXSS:

.wrap{
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 15px;
}
.wramimg{
    width: 100px;
  height: 100px;
}

JS:

Page({
  data: {
    pictures: [
      'https://p0.meituan.net/movie/ea4ac75173a8273f3956e514a4c78018253143.jpeg',
      'https://p0.meituan.net/movie/5d4fa35c6d1215b5689257307c461dd2541448.jpeg',
      'https://p0.meituan.net/movie/0c49f98a93881b65b58c349eed219dba290900.jpg'
    ]
  },
  previewImage: function (e) {
    var index = e.currentTarget.dataset.index;
    var pictures = this.data.pictures;
    wx.previewImage({
      current: pictures[index],
      urls: pictures
    })
  }
})

預覽前效果：

在手機端預覽後效果：