微信小程序開發之圖片預覽

實現圖片的展示和大圖預覽

使用wx.previewImage(OBJECT)來實現

OBJECT參數說明：

參數	類型	必填	說明
current	String	否	當前顯示圖片的鏈接，不填則默認為 urls 的第一張
urls	StringArray	是	需要預覽的圖片鏈接列表
success	Function	否	接口調用成功的回調函數
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

示例代碼：

wx.previewImage({
  current: '', // 當前顯示圖片的http鏈接 urls: [] // 需要預覽的圖片http鏈接列表 })

地址：https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html#wxpreviewimageobject

 

實例代碼

wxml

<view class="weui-uploader">
            <view class="weui-uploader__hd">
              <view class="weui-uploader__title">圖片列表</view>
            </view>
            <view class="weui-uploader__bd">
              <view class="weui-uploader__files" id="uploaderFiles">
                <block wx:for="{{Images}}">
                  <image bindtap="clickImage" style="width: 200px; height: 200px;" src="{{serverAddress}}{{item.ImagePath}}" mode="aspectFill" />
                </block>
              </view> 
            </view>
          </view>

js

clickImage: function (e) {
       var current = e.target.dataset.src
       wx.previewImage({
           current: current,
           urls: ImageLinkArray,//內部的地址為絕對路徑
            fail: function() {
         　　　　console.log('fail')
      　　　　 },
           complete: function () {
               console.info("點擊圖片了");
           },
       })
   },

 

歡迎閱讀本系列文章：微信小程序開發教程目錄