微信小程序?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)文章

早該知道的7個(gè)JavaScript技巧
早該知道的7個(gè)JavaScript技巧，有了這7個(gè)JavaScript技巧，事半功倍，感興趣的小伙伴們可以參考一下
2016-06-06
JS實(shí)現(xiàn)在頁(yè)面隨時(shí)自定義背景顏色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)在頁(yè)面隨時(shí)自定義背景顏色的方法,實(shí)例分析了javascript操作css樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
js實(shí)現(xiàn)table添加行tr、刪除行tr、清空行tr的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)table添加行tr、刪除行tr、清空行tr的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-10-10
關(guān)于ES6的六個(gè)小特性（二）
ES6提供了大量新的好的東西，在過去的一年內(nèi)，瀏覽器提供商做了大量的辛勤工作將新的語(yǔ)言特性更新到他們的瀏覽器中。盡管有重大的更新，很多小的語(yǔ)言更新另我眼前一亮，下面這篇文章主要介紹了關(guān)于ES6的六個(gè)小特性,需要的朋友可以參考下。
2017-02-02
js is_valid_filename驗(yàn)證文件名的函數(shù)
有時(shí)候我們需要對(duì)文件名進(jìn)行控制，包括一些特殊命名的文件與特殊符號(hào)的文件名進(jìn)程替換，那么就可以使用下面的函數(shù)
2017-07-07
JavaScript手寫一個(gè)前端存儲(chǔ)工具庫(kù)
在項(xiàng)目開發(fā)的過程中，為了減少提高性能，減少請(qǐng)求，開發(fā)者往往需要將一些不易改變的數(shù)據(jù)放入本地緩存中。本文就來用JavaScript手寫一個(gè)前端存儲(chǔ)工具庫(kù)，希望對(duì)大家有所幫助
2023-02-02
使用apifm-wxapi模塊中的問題及解決方法
這篇文章主要介紹了使用apifm-wxapi模塊中的問題及講解決,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-08-08
JS中的Replace()傳入函數(shù)時(shí)的用法詳解
這篇文章主要介紹了JS中的Replace()傳入函數(shù)時(shí)的用法詳解,replace方法的語(yǔ)法是：stringObj.replace(rgExp, replaceText)關(guān)于js replace 傳入函數(shù)的用法，大家通過本文學(xué)習(xí)吧
2017-09-09
JavaScript中的location、history、navigator對(duì)象實(shí)例介紹
這篇文章主要介紹了JavaScript中的location、history、navigator對(duì)象實(shí)例介紹,需要的朋友可以參考下
2023-05-05
js浮點(diǎn)數(shù)保留兩位小數(shù)點(diǎn)示例代碼(四舍五入)
本篇文章主要介紹了js浮點(diǎn)數(shù)保留兩位小數(shù)點(diǎn)示例代碼(四舍五入) 需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-12-12