微信小程序中的加载更多(即列表分页)
1.app.json中:
"window": {
"enablePullDownRefresh": true //是否开启当前页面下拉刷新
}
2.wxml中:
<view class="info" wx:for="{{contentlist}}" wx:key="key">
<input hidden="{{hidden}}" value="{{item.id}}"/>
<text>{{item.title}}</text>
<text class="time">{{item.inputtime}}</text>
<view>
<text>{{item.content}}</text>
</view>
</view>
3.js中:
data: {
hidden: true, //隐藏表单控件
page: 1, //当前请求数据是第几页
pageSize: 10, //每页数据条数
hasMoreData: true, //上拉时是否继续请求数据,即是否还有更多数据
contentlist: [], //获取的数据列表,以追加的形式添加进去
},
// 获取分页列表
getInfo: function (message) {
var that = this;
wx.showNavigationBarLoading() //在当前页面显示导航条加载动画
wx.showLoading({ //显示 loading 提示框
title: message,
})
wx.request({
url: 'http://localhost:88/wechat/test.php', //本地设置不校验合法域名
data: { page: that.data.page, count: that.data.pageSize },
method: 'post',
header: { 'content-type': 'application/x-www-form-urlencoded' },
success: function (res) {
var contentlistTem = that.data.contentlist;
if (res.data.length > 0) {
wx.hideNavigationBarLoading() //在当前页面隐藏导航条加载动画
wx.hideLoading() //隐藏 loading 提示框
if (that.data.page == 1) {
contentlistTem = []
}
var contentlist = res.data;
if (contentlist.length < that.data.pageSize) {
that.setData({
contentlist: contentlistTem.concat(contentlist),
hasMoreData: false
})
} else {
that.setData({
contentlist: contentlistTem.concat(contentlist),
hasMoreData: true,
page: that.data.page + 1
})
}
}
},
fail: function (res) {
wx.hideNavigationBarLoading()
wx.hideLoading()
fail()
},
complete: function (res) { },
})
}, /**
* 生命周期函数--监听页面初次渲染完成
*/
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
var that = this
that.getInfo('正在加载数据...')
}, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
this.data.page = 1
this.getInfo('正在刷新数据')
}, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
if (this.data.hasMoreData) {
this.getInfo('加载更多数据')
} else {
wx.showToast({
title: '没有更多数据',
})
}
},
原文链接:https://blog.csdn.net/qq_38882327/article/details/92627805(感谢分享)
微信小程序中的加载更多(即列表分页)的更多相关文章
- 微信小程序之上拉加载更多
loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流 ...
- 微信小程序实现滚动加载更多
1.需要用到的组件和api scroll-view(可滚动视图区域) wx.showToast(OBJECT)显示消息提示窗----显示loading小菊花用的 2.需要用到的属性 3.scrol-v ...
- 微信小程序上滑加载更多
onReachBottom: function () { var that = this var limit = that.data.limit var count = that.data.count ...
- 微信小程序 - 上拉加载更多组件
详情用例看demo,点击下载示例:loadmore
- 微信小程序之下拉加载和上拉刷新
微信小程序下拉加载和上拉刷新两种实现方法 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性 ...
- 微信小程序下拉加载和上拉刷新两种实现方法
方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性 设置js里onPullDownRefresh和onR ...
- 微信小程序---》分包加载
[小程序]---分包加载 一.分包加载 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载 在构建小程序分包项目时,构建会输出一个或多个分包.每个使 ...
- 微信小程序上拉加载下拉刷新
微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...
- 微信小程序下拉加载下一页
小程序做得多了,有些常用功能就有必要记录一下 请看详解: 微信小程序之下拉触底时加载下一页 wxml参考: <scroll-view class='dataContainer' scroll-y ...
随机推荐
- 【linux】Linux删除文件后磁盘依旧占用空间的问题
转自https://blog.51cto.com/2483526/798379 感谢 1.用df 检查发现/根目录可用空间为0 [root@/]#df -h 2.用du检查发现各目录占用的空间都很少, ...
- Elasticsearch 单字符串多字段查询
前言 有些时候,我们搜索的时候,只会提供一个输入框,但是会查询相关的多个字段,典型的如Google搜索,我们该如何用 Elasticsearch 如何实现呢? 实例 从单字符串查询的实例说起 创建测试 ...
- PTA 中序输出度为2的结点
6-10 中序输出度为2的结点 (10 分) 本题要求实现一个函数,按照中序遍历的顺序输出给定二叉树中度为2的结点. 函数接口定义: void InorderPrintNodes( BiTree ...
- WebGPU[1] 三角形
代码见: https://github.com/onsummer/my-dev-notes/tree/master/webgpu-Notes/01-triangle 如果本篇的代码不能跑了,请联系我或 ...
- 抗DDOS应急预案实践-生产环境总结-建议必看
一.首先摸清楚环境与资源 为DDoS应急预案提供支撑 所在的网络环境中,有多少条互联网出口?每一条带宽多少? 每一条互联网出口的运营商是否支持DDoS攻击清洗,我们是否购买,或可以紧急试用?当发生DD ...
- 学习笔记-angular 使用uuid
import { UUID } from 'angular2-uuid'; let uuid = UUID.UUID().replace(/-/g, '').toLocaleUpperCase(); ...
- 搜狗高级架构师帮你系统掌握TypeScript开发
JavaScript 是一门动态弱类型语言,对变量的类型非常宽容,而且不会在这些变量和它们的调用者之间建立结构化的契约. Angular 已经使用 TypeScript 重构了代码,另一大前端框架 V ...
- Leedcode算法专题训练(分治法)
归并排序就是一个用分治法的经典例子,这里我用它来举例描述一下上面的步骤: 1.归并排序首先把原问题拆分成2个规模更小的子问题. 2.递归地求解子问题,当子问题规模足够小时,可以一下子解决它.在这个例子 ...
- 生产环境中的redis是怎么部署的?
redis cluster,10台机器,5台机器部署了redis主实例,另外5台机器部署了redis的从实例,每个主实例挂了一个从实例,5个节点对外提供读写服务,每个节点的读写高峰qps可能可以达到每 ...
- Windows搭建Linux子系统(WSL)详细教程
介绍 WSL(windows下的Linux子系统) Windows Subsystem for Linux(简称WSL)是一个在Windows 10上能够运行原生Linux二进制可执行文件(ELF格式 ...