近期在開發(fā)一個(gè)小程序商城，里面有個(gè)欄目涉及到商品推薦列表的加載顯示，如下圖。
感覺(jué)這種功能可以做的很簡(jiǎn)單，但是要做的細(xì)致完善也不容易，因?yàn)橐紤]如下問(wèn)題：
1、當(dāng)數(shù)據(jù)還未加載時(shí)，顯示LOADING提示；
2、當(dāng)數(shù)據(jù)加載完時(shí)，用戶滾動(dòng)屏幕自動(dòng)加載下一頁(yè)；
3、數(shù)據(jù)加載完成，顯示數(shù)據(jù)已全部加載完成，顯示FwShop提示你，數(shù)據(jù)已全部加載，沒(méi)有更多內(nèi)容了；
4、下拉自動(dòng)刷新功能；
5、下拉加載分頁(yè)數(shù)據(jù)時(shí)，顯示LOADING提示。
6、數(shù)據(jù)加載出錯(cuò)時(shí)，顯示提示。
通過(guò)以上可見(jiàn)，一個(gè)小小的數(shù)據(jù)列表加載要做完善，就必須把以上的細(xì)節(jié)都做好。
小程序WXML代碼如下：
JSON代碼如下
{
"navigationBarTitleText": "推薦",
"enablePullDownRefresh": true
}
JS代碼如下
var util = require('../../utils/util.js')
var app = getApp()
Page({
data: {
data_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: function (options) {
var that = this
get_list(that, 1)
},
onPullDownRefresh: function () {
console.log('onPullDownRefresh')
var that = this
wx.showNavigationBarLoading() //在標(biāo)題欄中顯示加載
that.setData({
data_list: [],//當(dāng)前懸賞列表
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.hideNavigationBarLoading() //完成停止加載
wx.stopPullDownRefresh() //停止下拉刷新
},
onReachBottom: function () {
console.log('onReachBottom')
var that = this
var cpage = that.data.cpage
var is_loading_more = that.data.is_loading_more
var is_loading = that.data.is_loading
if (!is_loading_more && !is_loading) {
var total_page = that.data.total_page
if (cpage >= total_page) {
that.setData({
is_list_bottom: true
})
return
}
cpage++
that.setData({
is_loading_more: true
})
get_list(that, cpage)
}
},
onShareAppMessage: function () {
return {
title: '熱賣商品',
desc: '熱賣商品',
path: '/pages/goods/hot'
}
}
})
方維網(wǎng)絡(luò)專注于微信小程序定制開發(fā)，歡迎廣大客戶咨詢400-800-9385
