微信小程序?qū)崿F(xiàn)圖片預(yù)覽功能

來(lái)源：懂視網(wǎng) 責(zé)編：小OO 時(shí)間：2020-11-27 22:20:39

微信小程序?qū)崿F(xiàn)圖片預(yù)覽功能

本文為大家分享了微信小程序?qū)崿F(xiàn)圖片預(yù)覽的具體代碼，供大家參考，具體內(nèi)容如下：效果圖；原理使用wx.chooseImage選擇本地圖片；使用wx.previewImage預(yù)覽圖片。WXML；

推薦度：

導(dǎo)讀本文為大家分享了微信小程序?qū)崿F(xiàn)圖片預(yù)覽的具體代碼，供大家參考，具體內(nèi)容如下：效果圖；原理使用wx.chooseImage選擇本地圖片；使用wx.previewImage預(yù)覽圖片。WXML；

本文為大家分享了微信小程序?qū)崿F(xiàn)圖片預(yù)覽的具體代碼，供大家參考，具體內(nèi)容如下

效果圖

圖片預(yù)覽效果圖

原理

使用wx.chooseImage選擇本地圖片；

使用wx.previewImage預(yù)覽圖片。

WXML

<view>
 <button bindtap="previewImage" type="primary">圖片上傳預(yù)覽</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;
}

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的參數(shù)current和urls必須是http鏈接。

DEMO下載

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com