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

微信小程序選擇圖片和放大預(yù)覽圖片功能

 更新時(shí)間:2017年11月02日 14:11:27   作者:兔子先生i  
這篇文章主要介紹了微信小程序圖片放大預(yù)覽功能的實(shí)現(xiàn)方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下

視頻中,老師也是看著官方文檔,為學(xué)生們講解,微信提供了系統(tǒng)的方法來(lái)選擇圖片.

wx.chooseImage({})

此方法是用來(lái)選擇圖片的方法,具體使用如下:

 data: {
  avatarUrl:null
 },

首先在數(shù)據(jù)中定義接收數(shù)據(jù)的變量,然后調(diào)用方法選擇圖片,將圖片顯示出來(lái)。

bindViewTap:function(){
  var that = this;
  wx.chooseImage({
  // 設(shè)置最多可以選擇的圖片張數(shù),默認(rèn)9,如果我們?cè)O(shè)置了多張,那么接收時(shí)//就不在是單個(gè)變量了,
   count: 1, 
   sizeType: ['original', 'compressed'], // original 原圖,compressed 壓縮圖,默認(rèn)二者都有
   sourceType: ['album', 'camera'], // album 從相冊(cè)選圖,camera 使用相機(jī),默認(rèn)二者都有
   success: function(res){
    // 獲取成功,將獲取到的地址賦值給臨時(shí)變量
    var tempFilePaths = res.tempFilePaths;
    that.setData({
    //將臨時(shí)變量賦值給已經(jīng)在data中定義好的變量
     avatarUrl:tempFilePaths
    })
   },
   fail: function(res) {
    // fail
   },
   complete: function(res) {
    // complete
   }
  })
 }

此時(shí)我們定義的全局變量,也就是data中的url,已經(jīng)有值了,現(xiàn)在只需要在頁(yè)面中顯示即可。

//點(diǎn)擊此按鈕調(diào)用選擇圖片的方法,成功后將圖片顯示在image標(biāo)簽上
 <button bindtap="bindViewTap" type="submit">綁定事件</button>
<image src="{{avatarUrl}}"></image>

如果是多選的話,在顯示的時(shí)候,就不應(yīng)該直接顯示數(shù)據(jù)源了,這樣會(huì)報(bào)錯(cuò)的,因?yàn)榉祷氐氖菙?shù)組:

<image wx:for="{{avatarUrl}}" wx:key="unique" src="{{item}}"></image>

圖片預(yù)覽:

下面說(shuō)一下圖片預(yù)覽:

首先在data中定義好數(shù)據(jù)源:

data:{
  avatarUrl:null,
  pictures: [ 'https://p0.meituan.net/movie/ea4ac75173a8273f3956e514a4c78018253143.jpeg',
   'https://p0.meituan.net/movie/5d4fa35c6d1215b5689257307c461dd2541448.jpeg',
   'https://p0.meituan.net/movie/0c49f98a93881b65b58c349eed219dba290900.jpg',
   'https://p1.meituan.net/movie/45f98822bd15082ae3932b6108b17a01265779.jpg',
   'https://p1.meituan.net/movie/722de9a7b0c1f9c262162d87eccaec7c451290.jpg',
   'https://p0.meituan.net/movie/cb9be5bbedb78ce2ef8e83c93f83caca474393.jpg',
   'https://p1.meituan.net/movie/a852b992cdec15319c717ba9fa9b7a35406466.jpg',
   'https://p1.meituan.net/movie/dc1f94811793e9c653170cba7b05bf3e484939.jpg'
  ]
 },

然后創(chuàng)建方法previewImage,實(shí)現(xiàn)圖片預(yù)覽:

 previewImage: function(e){
  var that = this,
  //獲取當(dāng)前圖片的下表
    index = e.currentTarget.dataset.index,
    //數(shù)據(jù)源
    pictures = this.data.pictures;
  wx.previewImage({
  //當(dāng)前顯示下表
   current: pictures[index],
   //數(shù)據(jù)源
   urls: pictures
  })
 }

然后再頁(yè)面中邊遍歷數(shù)據(jù),顯示:

<view>
 <image wx:for="{{pictures}}" wx:key="unique"src="{{item}}" data-index="{{index}}" bindtap="previewImage"></image>
</view>

先列表顯示全部圖片,綁定預(yù)覽方法,點(diǎn)擊圖片進(jìn)行左右預(yù)覽,

下面在給大家補(bǔ)充下微信小程序圖片放大預(yù)覽功能,具體內(nèi)容介紹如下所示:

需求:當(dāng)點(diǎn)擊圖片時(shí),當(dāng)前圖片放大預(yù)覽,且可以左右滑動(dòng)

實(shí)現(xiàn)方式:使用微信小程序圖片預(yù)覽接口

我們可以看到api需要兩個(gè)參數(shù),分別通過(guò)下面的data-list和data-src來(lái)傳到j(luò)s中

wxml代碼:

 <!--圖片描述-->
 <view wx:if="{{item.pictures}}" class="list-dImg">
 <image bindtap="imgYu" data-list="{{item.pictures}}" data-src="{{dImg}}" wx:for="{{item.pictures}}" wx:for-item="dImg" src="{{dImg}}"></image>
 </view>

js代碼:

//圖片點(diǎn)擊事件
 imgYu:function(event){
 var src = event.currentTarget.dataset.src;//獲取data-src
 var imgList = event.currentTarget.dataset.list;//獲取data-list
 //圖片預(yù)覽
 wx.previewImage({
 current: src, // 當(dāng)前顯示圖片的http鏈接
 urls: imgList // 需要預(yù)覽的圖片http鏈接列表
 })
 }

1.給圖片添加一個(gè)點(diǎn)擊事件(imgYu)

2.使用event.currentTarget.dataset.自定義屬性名稱   來(lái)獲取data-的值 如event.currentTarget.dataset.src  (獲取data-src的值)

3.之后將獲取的兩個(gè)值 放到wx.previewImage接口 里面即可

效果圖片如下:可以左右滑動(dòng)上一張下一張

總結(jié)

以上所述是小編給大家介紹的微信小程序選擇圖片和放大預(yù)覽圖片功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • JavaScript 上萬(wàn)關(guān)鍵字瞬間匹配實(shí)現(xiàn)代碼

    JavaScript 上萬(wàn)關(guān)鍵字瞬間匹配實(shí)現(xiàn)代碼

    發(fā)一篇之前寫(xiě)的文章,平時(shí)還是經(jīng)常用到的,尤其是河蟹詞特別多的聊天系統(tǒng)里
    2013-07-07
  • webpack是如何實(shí)現(xiàn)模塊化加載的方法

    webpack是如何實(shí)現(xiàn)模塊化加載的方法

    這篇文章主要介紹了webpack是如何實(shí)現(xiàn)模塊化加載的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11
  • 深入淺析JavaScript中對(duì)事件的三種監(jiān)聽(tīng)方式

    深入淺析JavaScript中對(duì)事件的三種監(jiān)聽(tīng)方式

    最近這段時(shí)間因?yàn)槊刻煲薷木W(wǎng)站,為網(wǎng)站做特效,所以看了很多的js接觸事件,自己只會(huì)使用一小部分,有時(shí)用的時(shí)候也比較混亂,現(xiàn)在系統(tǒng)的整理了一下,本篇文章跟大家分享的是JavaScript中對(duì)事件的三種監(jiān)聽(tīng)方式
    2015-09-09
  • DVA框架統(tǒng)一處理所有頁(yè)面的loading狀態(tài)

    DVA框架統(tǒng)一處理所有頁(yè)面的loading狀態(tài)

    dva 有一個(gè)管理 effects 執(zhí)行的 hook,并基于此封裝了 dva-loading 插件。下面通過(guò)本文給大家分享DVA框架統(tǒng)一處理所有頁(yè)面的loading狀態(tài),感興趣的朋友一起看看吧
    2017-08-08
  • Canvas實(shí)現(xiàn)放射線動(dòng)畫(huà)效果

    Canvas實(shí)現(xiàn)放射線動(dòng)畫(huà)效果

    本文主要分享了Canvas實(shí)現(xiàn)放射線動(dòng)畫(huà)的示例代碼。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧
    2017-02-02
  • js判斷url是否有效的兩種方法

    js判斷url是否有效的兩種方法

    本篇文章主要是對(duì)js判斷url是否有效的兩種方法進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助
    2014-03-03
  • JavaScript中判斷某個(gè)字符串、數(shù)組等是否包含某個(gè)值的五種方法

    JavaScript中判斷某個(gè)字符串、數(shù)組等是否包含某個(gè)值的五種方法

    在JavaScript中有多種方法可以用來(lái)判斷字符串、數(shù)組是否包含某個(gè)值,這篇文章主要給大家介紹了關(guān)于JavaScript中判斷某個(gè)字符串、數(shù)組等是否包含某個(gè)值的五種方法,需要的朋友可以參考下
    2024-03-03
  • layui prompt 設(shè)置允許空白提交的方法

    layui prompt 設(shè)置允許空白提交的方法

    今天小編就為大家分享一篇layui prompt 設(shè)置允許空白提交的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-09-09
  • javascript筆記之匿名函數(shù)和閉包

    javascript筆記之匿名函數(shù)和閉包

    這篇文章主要為大家詳細(xì)介紹了javascript筆記之匿名函數(shù)和閉包的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-02-02
  • JAVASCRIPT代碼編寫(xiě)俄羅斯方塊網(wǎng)頁(yè)版

    JAVASCRIPT代碼編寫(xiě)俄羅斯方塊網(wǎng)頁(yè)版

    俄羅斯方塊方塊是小時(shí)候的一個(gè)回憶,從最開(kāi)始的掌上的黑白游戲機(jī),到電視游戲機(jī),到電腦,無(wú)不有它的痕跡,今天我們來(lái)一起重溫它的一種實(shí)現(xiàn)方法,也算是整理一下我的思路吧,感興趣的小伙伴一起學(xué)習(xí)吧
    2015-11-11

最新評(píng)論