微信小程序?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)在頁面隨時(shí)自定義背景顏色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)在頁面隨時(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)，瀏覽器提供商做了大量的辛勤工作將新的語言特性更新到他們的瀏覽器中。盡管有重大的更新，很多小的語言更新另我眼前一亮，下面這篇文章主要介紹了關(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ǔ)工具庫
在項(xiàng)目開發(fā)的過程中，為了減少提高性能，減少請(qǐng)求，開發(fā)者往往需要將一些不易改變的數(shù)據(jù)放入本地緩存中。本文就來用JavaScript手寫一個(gè)前端存儲(chǔ)工具庫，希望對(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方法的語法是：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