小程序商城推薦列表開發(fā)全解

最近在開發(fā)一個(gè)商城小程序，里面有一個(gè)與商品推薦列表相關(guān)的欄目加載顯示，如下圖。

迷你程序商城列表加載數(shù)據(jù)。

感覺這個(gè)功能可以做得很簡(jiǎn)單，但要做到細(xì)致完美并不容易，因?yàn)橐紤]以下幾個(gè)問題：

1. 當(dāng)數(shù)據(jù)未加載時(shí)顯示 LOADING 提示。

2. 數(shù)據(jù)加載時(shí)，用戶滾動(dòng)屏幕自動(dòng)加載下一頁(yè)。

3. 數(shù)據(jù)已加載，顯示數(shù)據(jù)已全部加載。FwShop 提示你已經(jīng)全部加載完畢，沒有多余的。

4 、下拉自動(dòng)刷新功能。

5. 下拉分頁(yè)數(shù)據(jù)時(shí)顯示 LOADING 提示。

6. 數(shù)據(jù)加載錯(cuò)誤時(shí)顯示提示。

通過(guò)上面可以看出，一個(gè)小小的列表要想把要加載的數(shù)據(jù)做的完美，一定要把上面的細(xì)節(jié)做好。

小程序WXML代碼如下:

迷你程序WXML代碼。

{。

"navigationBarTitleText": "recommend,"。

"enablePullDownRefresh": 真實(shí)的。

}。

JS 代碼如下所示：。

var util = require （'../../utils/util.js')。

var app = get App （）。

頁(yè)面（{。

數(shù)據(jù)：{。

data _ list :【】，// return。

頁(yè)面大小: 6/ / 每頁(yè)顯示多少。

Cpa ge : 0 ,//當(dāng)前頁(yè)。

total _ page : 1 ,//總頁(yè)數(shù)。

is _ loading : true ,// Loading ...。

is _ loading _ more : false ,// Load more。

is _ list _ bottom :false //列表的底部。

},。

function （ options ）{。

var that = this。

get_list(that, 1)。

},。

onPullDownRefresh: function () {。

console.log('onPullDownRefresh')。

var that = this。

Wx . show Navigation Bar Loading ）//在標(biāo)題欄顯示加載。

that.setData({。

data _ list :【】,//當(dāng)前獎(jiǎng)勵(lì)列表。

Cpa ge : 0 ,//當(dāng)前頁(yè)。

total _ page : 1 ,//總頁(yè)數(shù)。

is_loading: true,。

is_loading_more: false,。

is_list_bottom: false。

})。

get_list(that, 1)。

Wx . hide Navigation Bar Loading （）// Finish停止加載。

Wx . stop Pull Down 刷新（）// Stop下拉刷新。

},。

function （）{。

console.log('onReachBottom')。

var that = this。

var cpage = that . data . cpa ge。

var is _ loading _ more = that . data . is _ offload _ more。

變?nèi)蒹wis_loading = that.data.is_loading。

如果（。is_loading_more &&。is_loading) {。

var total _ page = that . data . ottom _頁(yè)。

if （ page >= total _ page ）{。

that.setData({。

is_list_bottom: 真實(shí)的。

})。

返回。

}。

cpage++。

that.setData({。

is_loading_more: 真實(shí)的。

})。

get_list(that, cpage)。

}。

},。

onShareAppMessage: function () {。

返回值{。

標(biāo)題：“熱東西”。

Desc: 'hot product',。

路徑:'/ pages / goods / hot '。

}。

}。

})。

以上就是江西小程序開發(fā),贛州小程序開發(fā),微信小程序開發(fā),抖音小程序開發(fā),百度小程序開發(fā)的分享。