1.分类列表数据展示功能的实现
1.1 结构
1.2 代码实现
1.2.1 列表显示数据，。每次界面显示6条数据，发请求获取数据，动态存放
var app = getApp()
Page({ data: {
categoryId: 1,
id: 0,
hideHeader: true,
hideBottom: true,
// refreshTime: '', // 刷新的时间
contentlist: null, // 列表显示的数据源
controls: true,
allPages: null, // 总页数
currentPage: 1, // 当前页数 默认是1
loadMoreData: '加载更多……'
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.getData();
},
// 上拉加载更多
loadMore: function() {
var self = this;
// 当前页是最后一页
if (self.data.currentPage == self.data.allPages) {
self.setData({
loadMoreData: '我也是有底线的'
})
return;
}
setTimeout(function() {
console.log('上拉加载更多');
var tempCurrentPage = self.data.currentPage;
tempCurrentPage = tempCurrentPage + 1;
self.setData({
currentPage: tempCurrentPage,
hideBottom: false
})
self.getData();
self.setData({
hideBottom: true
})
}, 300);
},
// 下拉刷新
refresh: function(e) {
var self = this;
setTimeout(function() {
console.log('下拉刷新');
var date = new Date();
self.setData({
currentPage: 1, hideHeader: false
})
self.getData();
// self.setData({
// hideHeader: true
// })
}, 300);
},
// 获取数据 pageIndex：页码参数
getData: function() {
var self = this;
var pageIndex = self.data.currentPage;
var categoryId = self.data.categoryId; wx.request({
url: 'http://xxxxxx:8080/webchat/list/queryinfolist',
data: {
schoolId: app.globalData.userInfo.schoolid,
categoryId: categoryId,
pageIndex: pageIndex
},
success: function(res) {
console.log(res.data)
// console.log(dataModel)
if (pageIndex == 1) { // 下拉刷新
self.setData({
allPages: res.data.data.allPages,
contentlist: res.data.data.messages,
hideHeader: false
})
} else { // 加载更多
console.log('加载更多');
var tempArray = self.data.contentlist;
tempArray = tempArray.concat(res.data.data.messages);
self.setData({
allPages: res.data.data.allPages,
contentlist: tempArray,
hideBottom: false
}) }
},
fail: function() { }
})
},
onClikedetail: function(e) {
var that = this;
that.setData({
id: e.currentTarget.dataset.goodsid
})
wx.navigateTo({
url: '../content/content?id=' + that.data.id,
})
}
})
.js
1.3 技术难点
1）实现下拉刷新，上拉加载的功能
2）列表的展示
