小程序商城推荐列表开发全解
在最近开发的a 小程序 mall中，有一个栏目涉及商品推荐列表的加载和显示，如下图所示。
我感觉这个功能可以简单的做到，但是要做到一丝不苟的完美并不容易，因为要考虑以下几个问题:
1.当数据尚未加载时，会显示加载提示；
2.加载数据时，用户滚动屏幕自动加载下一页；
3.数据加载时，显示所有数据都已加载，FwShop显示所有数据都已加载，没有更多内容；
4.下拉自动刷新功能；
5.加载分页数据时，会显示加载提示。 6.当数据加载出现错误时，会显示提示。 从上面可以看出，一个小的数据表加载要想完善，上面的细节都要做好。 小程序WXML代码如下:
JSON代码如下
{
"navigationBarTitleText & quot:& quot推荐”，
"enablePullDownRefresh & quot:正确
}
JS代码如下
var util = require(& # 39；../../utils/util . js & # 39；)
var app = getApp()
页面({
数据:{
Data_list: []，// list列表
Pagesize: 6，//每页显示多少
Cpage: 0，//当前页数
Total_page: 1，//总页数
Is_loading: true，//正在加载。
Is_loading_more: false，//加载更多
Is_list_bottom: false//列表的底部
},
onLoad:函数(选项){
变那个=这个
get_list(that，1)
},
onpulldownresh:function(){
console . log(& # 39；onPullDownRefresh & # 39)
变那个=这个
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 . hidenenavigationbarloading()//Finish停止加载
Wx.stopPullDownRefresh() //停止下拉刷新
},
onReachBottom: function () {
console . log(& # 39；onReachBottom & # 39)
变那个=这个
var c page = the . data . c page
var is _ loading _ more = that . data . is _ loading _ more
var is _ loading = that . data . is _ loading
如果(！正在加载更多内容。& amp！正在加载){
var total _ page = the . data . total _ page
if(c page & gt；= total_page) {
that.setData({
is_list_bottom: true
})
返回
}
cpage++
that.setData({
is_loading_more: true
})
get_list(即，cpage)
}
},
onShareAppMessage: function () {
返回{
标题:& # 39；热销商品& # 39；,
desc:& # 39；热销商品& # 39；,
路径:& # 39；/页面/商品/热门& # 39；
}
}
})
云崛起专注微信小程序定制开发。欢迎客户咨询010-57278867。
寒武纪. render(“尾巴”)
本文由“云崛起”原创发布，未经许可，禁止转载！本文原创链接：http://yunjueqi.com/weixinfenxiao/2477.html