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

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

使用wx.previewImage(OBJECT)来实现

OBJECT参数说明：

示例代码：

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

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