說(shuō)在前面
最近由于項(xiàng)目需要所以學(xué)了下小程序，也做了一些東西点待，隨后便有了以下的一些總結(jié)了烈菌，現(xiàn)在說(shuō)說(shuō)在小程序中如何進(jìn)行上拉加載照片和進(jìn)行懶加載。
問(wèn)題描述
無(wú)論是app還是小程序瓣喊，加載圖片多的時(shí)候都會(huì)出現(xiàn)圖片加載緩慢和流量耗費(fèi)多的問(wèn)題坡慌。而我在小程序中的解決方案是上拉加載和進(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做分頁(yè)參數(shù)傳遞到后臺(tái)加載新的數(shù)據(jù)逗概，然后將得到的數(shù)據(jù)res.data.result利用concat函數(shù)連接在array之后弟晚，array函數(shù)的作用是存放之前已經(jīng)加載過(guò)來(lái)的數(shù)據(jù)，連接新數(shù)據(jù)結(jié)束后再用一次setData即可逾苫！
現(xiàn)在看看我是如何巧用變相懶加載的
做過(guò)項(xiàng)目的都知道卿城，圖片的懶加載其實(shí)就是在圖片還沒(méi)有加載成功的時(shí)候出現(xiàn)一張默認(rèn)的圖片，這樣可以不至于圖片還沒(méi)有加載成功的時(shí)候出現(xiàn)一大推空白的地方铅搓，我也是因?yàn)樽鲰?xiàng)目出現(xiàn)這種情況之后才開(kāi)始研究如何避開(kāi)這種情況藻雪，大家可以看一下的源碼：
<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}})" 里邊是在圖片還沒(méi)有加載成功之前顯示的一個(gè)div的背景圖片狸吞，而就是這個(gè)背景圖片避開(kāi)了圖標(biāo)沒(méi)加載成功之前空白的尷尬勉耀。
Note:發(fā)布的這些文章全都是自己邊學(xué)邊總結(jié)的，難免有紕漏蹋偏，如果發(fā)現(xiàn)有不足的地方便斥，希望可以指出來(lái)，一起學(xué)習(xí)咯威始，么么噠枢纠。
開(kāi)源愛(ài)好者，相信開(kāi)源的力量必將改變世界:
** osc :** https://git.oschina.net/xi_fan
github: https://github.com/wiatingpub
