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

效果体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

DEMO下载

效果图

原理

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

WXML

<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

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

JS

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链接。

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

其他

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表