小程序图片预览

wxml

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

js

// pages/images/images.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    previewImageArr:[]
  },
  previewImage(e){
    let that=this
    wx.chooseImage({
      count: 4,
      success:function(res){
        let tempFilePaths = res.tempFilePaths
        that.setData({
          previewImageArr:tempFilePaths
        })
        console.log(res)
      }
    })

  },
  changePreview(e){
    let that = this
    wx.previewImage({
      // current:e.currentTarget.dataset.src,
      urls: that.data.previewImageArr,
    })
    console.log(e)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})