小程序商城推薦列表開發(fā)全解
在最近開發(fā)的a 小程序 mall中，有一個(gè)欄目涉及商品推薦列表的加載和顯示，如下圖所示。
我感覺這個(gè)功能可以簡(jiǎn)單的做到，但是要做到一絲不茍的完美并不容易，因?yàn)橐紤]以下幾個(gè)問題:
1.當(dāng)數(shù)據(jù)尚未加載時(shí)，會(huì)顯示加載提示；
2.加載數(shù)據(jù)時(shí)，用戶滾動(dòng)屏幕自動(dòng)加載下一頁(yè)；
3.數(shù)據(jù)加載時(shí)，顯示所有數(shù)據(jù)都已加載，F(xiàn)wShop顯示所有數(shù)據(jù)都已加載，沒有更多內(nèi)容；
4.下拉自動(dòng)刷新功能；
5.加載分頁(yè)數(shù)據(jù)時(shí)，會(huì)顯示加載提示。 6.當(dāng)數(shù)據(jù)加載出現(xiàn)錯(cuò)誤時(shí)，會(huì)顯示提示。 從上面可以看出，一個(gè)小的數(shù)據(jù)表加載要想完善，上面的細(xì)節(jié)都要做好。 小程序WXML代碼如下:
JSON代碼如下
{
"navigationBarTitleText & quot:& quot推薦”，
"enablePullDownRefresh & quot:正確
}
JS代碼如下
var util = require(& # 39；../../utils/util . js & # 39；)
var app = getApp()
頁(yè)面({
數(shù)據(jù):{
Data_list: []，// list列表
Pagesize: 6，//每頁(yè)顯示多少
Cpage: 0，//當(dāng)前頁(yè)數(shù)
Total_page: 1，//總頁(yè)數(shù)
Is_loading: true，//正在加載。
Is_loading_more: false，//加載更多
Is_list_bottom: false//列表的底部
},
onLoad:函數(shù)(選項(xiàng)){
變那個(gè)=這個(gè)
get_list(that，1)
},
onpulldownresh:function(){
console . log(& # 39；onPullDownRefresh & # 39)
變那個(gè)=這個(gè)
wx . shownavigationbarloading()//在標(biāo)題欄中顯示加載
that.setData({
Data_list: []，//當(dāng)前獎(jiǎng)勵(lì)列表
Cpage: 0，//當(dāng)前頁(yè)數(shù)
Total_page: 1，//總頁(yè)數(shù)
is_loading: true，
is_loading_more: false，
is_list_bottom: false
})
get_list(that，1)
wx . hidenenavigationbarloading()//Finish停止加載
Wx.stopPullDownRefresh() //停止下拉刷新
},
onReachBottom: function () {
console . log(& # 39；onReachBottom & # 39)
變那個(gè)=這個(gè)
var c page = the . data . c page
var is _ loading _ more = that . data . is _ loading _ more
var is _ loading = that . data . is _ loading
如果(！正在加載更多內(nèi)容。& amp！正在加載){
var total _ page = the . data . total _ page
if(c page & gt；= total_page) {
that.setData({
is_list_bottom: true
})
返回
}
cpage++
that.setData({
is_loading_more: true
})
get_list(即，cpage)
}
},
onShareAppMessage: function () {
返回{
標(biāo)題:& # 39；熱銷商品& # 39；,
desc:& # 39；熱銷商品& # 39；,
路徑:& # 39；/頁(yè)面/商品/熱門& # 39；
}
}
})
云崛起專注微信小程序定制開發(fā)。歡迎客戶咨詢010-57278867。
寒武紀(jì). render(“尾巴”)
本文由“云崛起”原創(chuàng)發(fā)布，未經(jīng)許可，禁止轉(zhuǎn)載！本文原創(chuàng)鏈接：http://www.xiaoweicao.cn/weixinfenxiao/2477.html