近期在開發(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
