近期在開發一個小程序商城，里面有個欄目涉及到商品推薦列表的加載顯示，如下圖。
小程序商城列表加載數據
感覺這種功能可以做的很簡單，但是要做的細致完善也不容易，因為要考慮如下問題：
1、當數據還未加載時，顯示LOADING提示；
2、當數據加載完時，用戶滾動屏幕自動加載下一頁；
3、數據加載完成，顯示數據已全部加載完成，顯示FwShop提示你，數據已全部加載，沒有更多內容了；
4、下拉自動刷新功能；
5、下拉加載分頁數據時，顯示LOADING提示。
6、數據加載出錯時，顯示提示。
通過以上可見，一個小小的數據列表加載要做完善，就必須把以上的細節都做好。
小程序WXML代碼如下：
小程序WXML代碼
JSON代碼如下
{
"navigationBarTitleText": "推薦",
"enablePullDownRefresh": true
}
JS代碼如下
var util = require('../../utils/util.js')
var app = getApp()
Page({
data: {
data_list: [],//列表列表
pagesize: 6,//每頁顯示多少
cpage: 0,//當前頁數
total_page: 1,//總頁數
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() //在標題欄中顯示加載
that.setData({
data_list: [],//當前懸賞列表
cpage: 0,//當前頁數
total_page: 1,//總頁數
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'
}
}
})