广州明翔网络

广州网站建设公司

小程序商城推荐列表开发全解

近期在开发一个小程序商城,里面有个栏目涉及到商品推荐列表的加载显示,如下图。

小程序商城推荐列表开发全解

小程序商城列表加载数据

感觉这种功能可以做的很简单,但是要做的细致完善也不容易,因为要考虑如下问题:

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'


}


}


})


cache
Processed in 0.005452 Second.