說在前面

最(zui)近由于項目需要所以學了下(xia)小(xiao)程序，也做了一些(xie)東西，隨后便有了以下(xia)的一些(xie)總結了，現在(zai)說說在(zai)小(xiao)程序中如何進行(xing)上拉加(jia)載照片和(he)進行(xing)懶加(jia)載。

問題描述

無(wu)論是(shi)app還(huan)是(shi)小程序(xu)，加(jia)載圖片多的時(shi)候(hou)都(dou)會出現圖片加(jia)載緩慢和流(liu)量耗(hao)費(fei)多的問題。而我在小程序(xu)中的解決方(fang)案是(shi)上拉加(jia)載和進行“變相懶(lan)加(jia)載”。

老規矩，以源碼為導向講解上拉加載

photos.wxml

    <scroll-view class="scroll" style="height:{{clientHeight}}px;" scroll-y="true" bindscrolltolower="loadMore" >
        //放置圖片的代碼
    </scroll-view>

源碼解讀：這(zhe)里只需要(yao)關注bindscrolltolower函數即(ji)可，它意(yi)思是上拉的(de)時候(hou)觸發的(de)函數，而這(zhe)里觸發的(de)函數是loadMore。

photos.js

loadMore: function(e){
this.showLoading('正在加載圖片中');
var that = this;
currentPage++;
wx.request({
        url: baseUrl  +'pictureController/getPicturesByAid',
        data: {
            pictureAid: albumId,
            pageSize: pageSize,
            currentPage : currentPage
        },
        header: {
            'content-type': 'application/json'
        },
        success: function(res) {
            console.log(res);
            if(res.data.result.length!=0)
            {
                array = array.concat(res.data.result)
                that.setData({
                    array : array
                })
            }
            else
            {
                that.showToast('已加載完全部圖片!');
            }
        },
        complete: function(res){
            that.hideLoading();
        }
    })
}

源(yuan)碼解讀：js函數(shu)(shu)中(zhong)的(de)一些參(can)數(shu)(shu)和(he)函數(shu)(shu)我都去(qu)掉了，留下這(zhe)個(ge)loadMore函數(shu)(shu)，這(zhe)個(ge)函數(shu)(shu)的(de)作用是用pageSize和(he)currentPage做(zuo)分頁參(can)數(shu)(shu)傳遞到后(hou)(hou)臺加(jia)(jia)載(zai)新(xin)的(de)數(shu)(shu)據，然后(hou)(hou)將得到的(de)數(shu)(shu)據res.data.result利用concat函數(shu)(shu)連接在array之后(hou)(hou)，array函數(shu)(shu)的(de)作用是存放(fang)之前已經加(jia)(jia)載(zai)過來的(de)數(shu)(shu)據，連接新(xin)數(shu)(shu)據結束(shu)后(hou)(hou)再(zai)用一次setData即可！

現在看看我是如何巧用變相懶加載的

做過項目的(de)都知道，圖(tu)(tu)片的(de)懶(lan)加(jia)(jia)載(zai)(zai)其實就是在圖(tu)(tu)片還沒有加(jia)(jia)載(zai)(zai)成(cheng)功的(de)時(shi)候(hou)出(chu)(chu)現(xian)一(yi)張默認的(de)圖(tu)(tu)片，這(zhe)(zhe)樣可以不至于(yu)圖(tu)(tu)片還沒有加(jia)(jia)載(zai)(zai)成(cheng)功的(de)時(shi)候(hou)出(chu)(chu)現(xian)一(yi)大推空白的(de)地方，我也是因為做項目出(chu)(chu)現(xian)這(zhe)(zhe)種情(qing)況之后(hou)才(cai)開(kai)始研究如何(he)避開(kai)這(zhe)(zhe)種情(qing)況，大家(jia)可以看一(yi)下的(de)源碼：

<scroll-view class="scroll" style="height:{{clientHeight}}px;" scroll-y="true" bindscrolltolower="loadMore" >
<view class="function" style="background-image:url({{cryUrl}})" wx:for="{{array}}" wx:for-item="item">
    <image src="{{imageBaseUrl+item.pictureAid+'/'+item.pictureName}}" style="height:95%;width:95%;margin:3px auto;" bindtap="selectPhotos" id="{{imageBaseUrl+item.pictureAid+'/'+item.pictureName}}&{{item.pictureUploadtime}}"/>
</view> 
</scroll-view>

源碼(ma)解(jie)讀：這個就是(shi)從服務器獲取圖片(pian)數(shu)據(ju)成功之(zhi)后(hou)循(xun)環排列圖片(pian)的(de)(de)源碼(ma)，重(zhong)點在(zai)于style="background-image:url({{cryUrl}})" 里邊是(shi)在(zai)圖片(pian)還沒有加(jia)載(zai)(zai)成功之(zhi)前顯示的(de)(de)一個div的(de)(de)背景圖片(pian)，而就是(shi)這個背景圖片(pian)避(bi)開了圖標沒加(jia)載(zai)(zai)成功之(zhi)前空白的(de)(de)尷(gan)尬。

Note:發布的這些文章全都是自己邊學(xue)邊總結(jie)的，難(nan)免(mian)有紕漏(lou)，如果發現有不足的地方，希(xi)望(wang)可以指出(chu)來(lai)，一起學(xue)習咯，么(me)么(me)噠。