国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

微信小程序實現圖片預覽功能

2019-11-19 14:26:13
字體:
來源:轉載
供稿:網友

本文為大家分享了微信小程序實現圖片預覽的具體代碼,供大家參考,具體內容如下

效果圖

圖片預覽效果圖

原理

  • 使用wx.chooseImage選擇本地圖片;
  • 使用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鏈接。

DEMO下載

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 定边县| 永新县| 邵东县| 湾仔区| 汾西县| 孟连| 八宿县| 绿春县| 牙克石市| 资源县| 新营市| 岳西县| 杨浦区| 滨海县| 普安县| 漳平市| 沂源县| 信丰县| 正定县| 昆明市| 平邑县| 托里县| 库尔勒市| 南昌市| 桂东县| 景泰县| 花垣县| 图木舒克市| 济宁市| 德格县| 墨竹工卡县| 安溪县| 新兴县| 平罗县| 夏河县| 崇州市| 山东省| 尼玛县| 抚松县| 科技| 武功县|