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)列表的展示

微信小程序-----校园头条详细开发之列表展示数据的更多相关文章

  1. 微信小程序-----校园头条详细开发之注册登录

    1.注册登录功能的实现 1.1结构 1.2 代码实现 1.2.1  为了通信的安全着想,在此我是通过小程序端获得code,然后传递给后端,在后端向微信后台发送api请求,解密,从而得到用户的唯一标示o ...

  2. 微信小程序-----校园头条详细开发之首页

    1.首页展示功能的实现 1.1  结构 1.2 代码实现 1.2.1  界面的设计这里就不多说了,样式都是我自己写的,还有就是页面的跳转,看详细代码 var app = getApp() Page({ ...

  3. 微信小程序-----校园头条整体概括

    1.项目需求 为了让在校师生可以更加方便的了解学校信息,从而合理的安排自己的时间,避免发生冲突和错过事件,通过小程序的便利性,可以达到随手一查的功能. 2.项目布局 3.效果展示 3.1登录 3.2首 ...

  4. 微信小程序版博客——开发汇总总结(附源码)

    花了点时间陆陆续续,拼拼凑凑将我的小程序版博客搭建完了,这里做个简单的分享和总结. 整体效果 对于博客来说功能页面不是很多,且有些限制于后端服务(基于ghost博客提供的服务),相关样式可以参考截图或 ...

  5. 微信小程序购物商城系统开发系列-目录结构

    上一篇我们简单介绍了一下微信小程序的IDE(微信小程序购物商城系统开发系列-工具篇),相信大家都已经蠢蠢欲试建立一个自己的小程序,去完成一个独立的商城网站. 先别着急我们一步步来,先尝试下写一个自己的 ...

  6. 微信小程序购物商城系统开发系列-工具篇

    微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦.对于它 估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操作系统.新的生态,未来大部分应用场景都将 ...

  7. 微信小程序购物商城系统开发系列

    微信小程序购物商城系统开发系列 微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦.对于它 估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操作系统. ...

  8. 从微信小程序到鸿蒙js开发【11】——页面路由

    目录: 1.router.push()&wx.navigateTo() 2.router.replace()&wx.redirectTo() 3.router.back()&w ...

  9. 从微信小程序到鸿蒙js开发【12】——storage缓存&自动登录

    鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口] 正文: 在应用开发时,我们常需要将一些数据缓存到本地,以提升用户体验.比如在一个电商的app中,如果希望用户登录成功后,下次打 ...

随机推荐

  1. mybatis 异常处理:Invalid bound statement (not found)

    mybatis 的使用过程中提示错误: org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): ...

  2. 介绍一款渗透神器——Burp Suite

    Burp Suite 是用于攻击web 应用程序的集成平台.它包含了许多工具,并为这些工具设计了许多接口,以促进加快攻击应用程序的过程.所有的工具都共享一个能处理并显示HTTP 消息,持久性,认证,代 ...

  3. LeetCode Unique Binary Search Trees (DP)

    题意: 一棵BST有n个节点,每个节点的key刚好为1-n.问此树有多少种不同形态? 思路: 提示是动态规划. 考虑一颗有n个节点的BST和有n-1个节点的BST.从n-1到n只是增加了一个点n,那么 ...

  4. COGS 1191. [Tyvj Feb11] 猫咪的进化

    ★   输入文件:neko.in   输出文件:neko.out   简单对比时间限制:1 s   内存限制:128 MB [背景] 对于一只猫咪来说,它是有九条命的.但是并不是所有的猫咪都是这样,只 ...

  5. 在vue-cli中引入外部插件

    一.可以用npm下载的 现在以jquery为例子: 1 先在package.json中的dependencies中写入“jquery”:“^3.2.1”(jquery版本) 2 在npm中搜索jque ...

  6. Spark性能优化——和shuffle搏斗

    Spark的性能分析和调优很有意思,今天再写一篇.主要话题是shuffle,当然也牵涉一些其他代码上的小把戏. 以前写过一篇文章,比较了几种不同场景的性能优化,包括portal的性能优化,web se ...

  7. hive对有null值的列进行avg,sum,count等操作时会不会过滤null值

    在hive中,我们经常会遇到对某列进行count.sum.avg等操作计算记录数.求和.求平均值等,但这列经常会出现有null值的情况,那这些操作会不会过滤掉null能呢? 下面我们简单测试下: wi ...

  8. 6.3安装squid

    1. Frist you need to install Development tools #yum groupinstall "Development Tools" 2. Ge ...

  9. 张量 (tensor) 是什么?

    对于大部分已经熟练的数学和物理工作者, 这实在是一个极为基础的问题. 但这个问题在我刚接触张量时也困扰了我很久. 张量的那么多定义, 究竟哪些是对的? (显然都是对的. ) 它们的关系是什么? 我尽可 ...

  10. 【luogu P5022 旅行】 题解

    题目连接:https://www.luogu.org/problemnew/show/P5022 \(NOIP2018 DAY2T1\) 考场上只写了60分,很容易想到当 m = n - 1 时的树的 ...