微信小程序-----校园头条详细开发之列表展示数据
2024-08-27 19:36:22
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）列表的展示
最新文章
- Pattern Recognition And Machine Learning (模式识别与机器学习) 笔记 (1)
- c++ 覆盖、重载与隐藏
- 【spoj8222】Substrings
- git 基本配置及使用
- Swift学习初步（一）
- mysql 误删除ibdata1之后如何恢复
- vim对erlang语法支持
- [置顶] c++类的继承(inheritance)
- 网站开发常用jQuery插件总结(一）提示插件alertify
- css盒子模型、文档流、相对与绝对定位、浮动与清除模型
- Android 自定义View高级特效，神奇的贝塞尔曲线
- python输出htmltestrunner中文乱码如何解决
- 十分钟学会 tmux
- 用vlc搭建简单流媒体服务器（UDP和TCP方式）
- java 中的JDK封装的数据结构和算法解析（集合类）----顺序表 List 之 ArrayList
- paginate()出来的数据怎样循环插入数据？
- 轻松理解AOP(面向切面编程)
- [转载]理解 Git 分支管理最佳实践
- ORM&MySQL
- elasticsearch与solr区别