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

最近在开发一个商城小程序，里面有一个与商品推荐列表相关的栏目加载显示，如下图。

迷你程序商城列表加载数据。

感觉这个功能可以做得很简单，但要做到细致完美并不容易，因为要考虑以下几个问题：

1. 当数据未加载时显示 LOADING 提示。

2. 数据加载时，用户滚动屏幕自动加载下一页。

3. 数据已加载，显示数据已全部加载。FwShop 提示你已经全部加载完毕，没有多余的。

4 、下拉自动刷新功能。

5. 下拉分页数据时显示 LOADING 提示。

6. 数据加载错误时显示提示。

通过上面可以看出，一个小小的列表要想把要加载的数据做的完美，一定要把上面的细节做好。

小程序WXML代码如下:

迷你程序WXML代码。

{。

"navigationBarTitleText": "recommend,"。

"enablePullDownRefresh": 真实的。

}。

JS 代码如下所示：。

var util = require （'../../utils/util.js')。

var app = get App （）。

页面（{。

数据：{。

data _ list :【】，// return。

页面大小: 6/ / 每页显示多少。

Cpa ge : 0 ,//当前页。

total _ page : 1 ,//总页数。

is _ loading : true ,// Loading ...。

is _ loading _ more : false ,// Load more。

is _ list _ bottom :false //列表的底部。

},。

function （ options ）{。

var that = this。

get_list(that, 1)。

},。

onPullDownRefresh: function () {。

console.log('onPullDownRefresh')。

var that = this。

Wx . show Navigation Bar Loading ）//在标题栏显示加载。

that.setData({。

data _ list :【】,//当前奖励列表。

Cpa ge : 0 ,//当前页。

total _ page : 1 ,//总页数。

is_loading: true,。

is_loading_more: false,。

is_list_bottom: false。

})。

get_list(that, 1)。

Wx . hide Navigation Bar Loading （）// Finish停止加载。

Wx . stop Pull Down 刷新（）// Stop下拉刷新。

},。

function （）{。

console.log('onReachBottom')。

var that = this。

var cpage = that . data . cpa ge。

var is _ loading _ more = that . data . is _ offload _ more。

变容体is_loading = that.data.is_loading。

如果（。is_loading_more &&。is_loading) {。

var total _ page = that . data . ottom _页。

if （ page >= total _ page ）{。

that.setData({。

is_list_bottom: 真实的。

})。

返回。

}。

cpage++。

that.setData({。

is_loading_more: 真实的。

})。

get_list(that, cpage)。

}。

},。

onShareAppMessage: function () {。

返回值{。

标题：“热东西”。

Desc: 'hot product',。

路径:'/ pages / goods / hot '。

}。

}。

})。

以上就是江西小程序开发,赣州小程序开发,微信小程序开发,抖音小程序开发,百度小程序开发的分享。