微信小程序?qū)崿F(xiàn)圖片預(yù)覽功能
更新時間：2018年01月31日 16:47:56 作者：Rattenking
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)圖片預(yù)覽功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文為大家分享了微信小程序?qū)崿F(xiàn)圖片預(yù)覽的具體代碼，供大家參考，具體內(nèi)容如下
效果圖
原理
- 使用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;
}
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的參數(shù)current和urls必須是http鏈接。
DEMO下載
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
Bootstrap Tree View簡單而優(yōu)雅的樹結(jié)構(gòu)組件實例解析
本文通過實例代碼給大家介紹了Bootstrap Tree View簡單而優(yōu)雅的樹結(jié)構(gòu)組件,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-06-06
使用Modello編寫JavaScript類...2006-12-12
javascript中for...of和for..in循環(huán)的區(qū)別
JS中循環(huán)語句眾多，你是否也有用的時候突然不知道用哪個的經(jīng)歷，本文主要介紹了javascript中for...of和for..in循環(huán)的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
本文主要介紹了微信小程序骨架屏的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
JS注冊/移除事件處理程序(ExtJS應(yīng)用程序設(shè)計實戰(zhàn))
最常做的事情就是注冊事件處理程序，因為在ExtJS的世界里，幾乎完全由時間組成，下面是處理程序案例，感興趣的朋友可以參考下哈，希望可以幫助到你2013-05-05
事件對于控件來說至關(guān)重要，控件的消息通信機(jī)制使用事件的成本最低，但是對于JS控件來說有一些麻煩需要解決，JS類本身不支持事件，DOM模型支持的事件僅適應(yīng)于瀏覽器的DOM節(jié)點(diǎn)。所以創(chuàng)建一套事件是我們寫控件之前要做的2012-10-10
今天小編就為大家分享一篇layer更改皮膚的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
Bootstrap框架結(jié)合jQuery仿百度換膚功能實例解析
這篇文章主要為大家詳細(xì)介紹了Bootstrap框架結(jié)合jQuery仿百度換膚功能實現(xiàn)代碼解析,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
javascript中this做事件參數(shù)相關(guān)問題解答
有關(guān)this想必大家早有所耳聞，只不過在使用中不是那么在意而已，接下來為大家介紹下this做事件參數(shù)問題，感興趣的你可不要錯過了哈2013-03-03
tabBar相對而言用的還是比較多的,但是用起來并沒有難,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置之tabBar的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02