微信小程序chooseImage和previewImage使用方法

今天嘗試了微信小程序的圖片功能,選擇圖片和預覽圖片,開發工具是最新版哈
具體以下:
wxml文件:小程序


<view class='loadpic' bindtap='chooseImage'>選擇圖片</view>
<view class='showPic'>
  <view wx:for="{{imagesList}}" wx:for-item="image" wx:key="index" class="previewimg">  
      <image class='image' src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image>  
  </view>  
</view>

js文件:微信小程序

data: {
    imagesList: []
  },
  chooseImage: function () {
    var that = this
    wx.chooseImage({
      count: 9, // 默認9
      sizeType: ['original', 'compressed'], // 能夠指定是原圖仍是壓縮圖,默認兩者都有
      sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機,默認兩者都有
      success: function (res) {
        console.log(res)
        // 返回選定照片的本地文件路徑列表,tempFilePath能夠做爲img標籤的src屬性顯示圖片
        var tempFilePaths = res.tempFilePaths
        that.setData({
          imagesList: tempFilePaths
        })
        console.log(tempFilePaths)
      }
    })
  },
  previewImage: function (e) {
    var current = e.target.dataset.src;
    wx.previewImage({
      current: current, // 當前顯示圖片的http連接  
      urls: this.data.imagesList // 須要預覽的圖片http連接列表  
    })
  },

wxss文件:微信

.loadpic{
  margin: 20px auto;
  width: 500rpx;
  height: 80rpx;
  background: #d34c17;
  text-align: center;
  color: white;
  line-height: 80rpx;
}
.previewimg{
  padding: 10rpx;
  float: left;
}
.image{
  display: block;
  width: 200rpx;
  height: 200rpx;
}
.showPic{
  margin: 0 auto;
  width: 90%;
}

不管本地仍是真機測試均可以哈!!!開始在網上找資料,找了好多都不成功,最後本身慢慢調試成功了!!!哭一個!!
相關文章
相關標籤/搜索