微信小程序如何實現(xiàn)選擇圖片和放大預(yù)覽圖片功能-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)微信小程序如何實現(xiàn)選擇圖片和放大預(yù)覽圖片功能的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

發(fā)展壯大離不開廣大客戶長期以來的信賴與支持，我們將始終秉承“誠信為本、服務(wù)至上”的服務(wù)理念，堅持“二合一”的優(yōu)良服務(wù)模式，真誠服務(wù)每家企業(yè)，認(rèn)真做好每個細(xì)節(jié)，不斷完善自我，成就企業(yè)，實現(xiàn)共贏。行業(yè)涉及高空作業(yè)車租賃等，在網(wǎng)站建設(shè)公司、成都營銷網(wǎng)站建設(shè)、WAP手機(jī)網(wǎng)站、VI設(shè)計、軟件開發(fā)等項目上具有豐富的設(shè)計經(jīng)驗。

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

wx.chooseImage({})

此方法是用來選擇圖片的方法,具體使用如下:

 data: {
  avatarUrl:null
 },

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

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

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

//點擊此按鈕調(diào)用選擇圖片的方法,成功后將圖片顯示在image標(biāo)簽上
 綁定事件

如果是多選的話,在顯示的時候,就不應(yīng)該直接顯示數(shù)據(jù)源了,這樣會報錯的,因為返回的是數(shù)組:

圖片預(yù)覽:

下面說一下圖片預(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,實現(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
  })
 }

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

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

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

需求：當(dāng)點擊圖片時，當(dāng)前圖片放大預(yù)覽，且可以左右滑動

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

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

wxml代碼：

js代碼：

//圖片點擊事件
 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.給圖片添加一個點擊事件(imgYu)

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

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

效果圖片如下：可以左右滑動上一張下一張

感謝各位的閱讀！關(guān)于“微信小程序如何實現(xiàn)選擇圖片和放大預(yù)覽圖片功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

本文題目：微信小程序如何實現(xiàn)選擇圖片和放大預(yù)覽圖片功能-創(chuàng)新互聯(lián)
標(biāo)題URL：http://m.jiaotiyi.com/article/ejojd.html