欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2018年01月31日 16:47:56   作者：Rattenking  
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)圖片預(yù)覽功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文為大家分享了微信小程序?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;
}

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下載

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • Bootstrap Tree View簡(jiǎn)單而優(yōu)雅的樹結(jié)構(gòu)組件實(shí)例解析

    Bootstrap Tree View簡(jiǎn)單而優(yōu)雅的樹結(jié)構(gòu)組件實(shí)例解析

    本文通過實(shí)例代碼給大家介紹了Bootstrap Tree View簡(jiǎn)單而優(yōu)雅的樹結(jié)構(gòu)組件,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
    2017-06-06
  • 使用Modello編寫JavaScript類

    使用Modello編寫JavaScript類

    使用Modello編寫JavaScript類...
    2006-12-12
  • javascript中for...of和for..in循環(huán)的區(qū)別

    javascript中for...of和for..in循環(huán)的區(qū)別

    JS中循環(huán)語(yǔ)句眾多，你是否也有用的時(shí)候突然不知道用哪個(gè)的經(jīng)歷，本文主要介紹了javascript中for...of和for..in循環(huán)的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • 微信小程序骨架屏的實(shí)現(xiàn)方法

    微信小程序骨架屏的實(shí)現(xiàn)方法

    本文主要介紹了微信小程序骨架屏的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-01-01
  • JS注冊(cè)/移除事件處理程序(ExtJS應(yīng)用程序設(shè)計(jì)實(shí)戰(zhàn))

    JS注冊(cè)/移除事件處理程序(ExtJS應(yīng)用程序設(shè)計(jì)實(shí)戰(zhàn))

    最常做的事情就是注冊(cè)事件處理程序，因?yàn)樵贓xtJS的世界里，幾乎完全由時(shí)間組成，下面是處理程序案例，感興趣的朋友可以參考下哈，希望可以幫助到你
    2013-05-05
  • JS 控件事件小結(jié)

    JS 控件事件小結(jié)

    事件對(duì)于控件來(lái)說至關(guān)重要，控件的消息通信機(jī)制使用事件的成本最低，但是對(duì)于JS控件來(lái)說有一些麻煩需要解決，JS類本身不支持事件，DOM模型支持的事件僅適應(yīng)于瀏覽器的DOM節(jié)點(diǎn)。所以創(chuàng)建一套事件是我們寫控件之前要做的
    2012-10-10
  • layer更改皮膚的實(shí)現(xiàn)方法

    layer更改皮膚的實(shí)現(xiàn)方法

    今天小編就為大家分享一篇layer更改皮膚的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
    2019-09-09
  • Bootstrap框架結(jié)合jQuery仿百度換膚功能實(shí)例解析

    Bootstrap框架結(jié)合jQuery仿百度換膚功能實(shí)例解析

    這篇文章主要為大家詳細(xì)介紹了Bootstrap框架結(jié)合jQuery仿百度換膚功能實(shí)現(xiàn)代碼解析,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-09-09
  • javascript中this做事件參數(shù)相關(guān)問題解答

    javascript中this做事件參數(shù)相關(guān)問題解答

    有關(guān)this想必大家早有所耳聞，只不過在使用中不是那么在意而已，接下來(lái)為大家介紹下this做事件參數(shù)問題，感興趣的你可不要錯(cuò)過了哈
    2013-03-03
  • 微信小程序自定義tabbar欄實(shí)現(xiàn)過程講解

    微信小程序自定義tabbar欄實(shí)現(xiàn)過程講解

    tabBar相對(duì)而言用的還是比較多的,但是用起來(lái)并沒有難,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置之tabBar的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-02-02

最新評(píng)論