說在前面

最近由于項(xiàng)目需要所以學(xué)了下小程序，也做了一些東西，隨后便有了以下的一些總結(jié)了，現(xiàn)在說說在小程序中如何進(jìn)行上拉加載照片和進(jìn)行懶加載。

問題描述

無論是app還是小程序，加載圖片多的時(shí)候都會(huì)出現(xiàn)圖片加載緩慢和流量耗費(fèi)多的問題。而我在小程序中的解決方案是上拉加載和進(jìn)行“變相懶加載”。

老規(guī)矩，以源碼為導(dǎo)向講解上拉加載

photos.wxml

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

源碼解讀：這里只需要關(guān)注bindscrolltolower函數(shù)即可，它意思是上拉的時(shí)候觸發(fā)的函數(shù)，而這里觸發(fā)的函數(shù)是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();
        }
    })
}

源碼解讀：js函數(shù)中的一些參數(shù)和函數(shù)我都去掉了，留下這個(gè)loadMore函數(shù)，這個(gè)函數(shù)的作用是用pageSize和currentPage做分頁參數(shù)傳遞到后臺(tái)加載新的數(shù)據(jù)，然后將得到的數(shù)據(jù)res.data.result利用concat函數(shù)連接在array之后，array函數(shù)的作用是存放之前已經(jīng)加載過來的數(shù)據(jù)，連接新數(shù)據(jù)結(jié)束后再用一次setData即可！

現(xiàn)在看看我是如何巧用變相懶加載的

做過項(xiàng)目的都知道，圖片的懶加載其實(shí)就是在圖片還沒有加載成功的時(shí)候出現(xiàn)一張默認(rèn)的圖片，這樣可以不至于圖片還沒有加載成功的時(shí)候出現(xiàn)一大推空白的地方，我也是因?yàn)樽鲰?xiàng)目出現(xiàn)這種情況之后才開始研究如何避開這種情況，大家可以看一下的源碼：

<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>

源碼解讀：這個(gè)就是從服務(wù)器獲取圖片數(shù)據(jù)成功之后循環(huán)排列圖片的源碼，重點(diǎn)在于style="background-image:url({{cryUrl}})" 里邊是在圖片還沒有加載成功之前顯示的一個(gè)div的背景圖片，而就是這個(gè)背景圖片避開了圖標(biāo)沒加載成功之前空白的尷尬。

Note:發(fā)布的這些文章全都是自己邊學(xué)邊總結(jié)的，難免有紕漏，如果發(fā)現(xiàn)有不足的地方，希望可以指出來，一起學(xué)習(xí)咯，么么噠。