微信小程序----图片预览

效果图

原理

1. 使用wx.chooseImage选择本地图片；
2. 使用wx.previewImage预览图片。

WXML

代码语言：javascript复制

<view>
  <button bindtap="previewImage" type="primary">图片上传预览</button>
  <view class="tui-content"> 
    <image class="tui-preview-img" wx:for="{{previewImageArr}}" bindtap="changePreview" data-src="{{item}}" src="{{item}}"></image>
  </view>
</view>

WXSS

代码语言：javascript复制

page{background-color: #efeff4;}
.tui-preview-img{
  width: 200rpx;
  height: 120rpx;
}

JS

代码语言：javascript复制

Page({
  data: {
    previewImageArr:[]
  },
  previewImage(e){
    var self = this;
    wx.chooseImage({
      count:8,
      success(res) {
        var tempFilePaths = res.tempFilePaths;
        self.setData({ previewImageArr: tempFilePaths});
      }
    })
  },
  changePreview(e){
    var self = this;
    wx.previewImage({
      current: e.currentTarget.dataset.src,
      urls: self.data.previewImageArr
    })
  }
})

注意

wx.previewImage的参数current和urls必须是http链接。

http 原理

0 人点赞