微信小程序开发之图片预览

实现图片的展示和大图预览

使用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=" 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("点击图片了");
           },
       })
   },

欢迎阅读本系列文章：微信小程序开发教程目录