微信小程序中的加载更多(即列表分页)
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 ...
随机推荐
- python基础学习之列表的功能方法
列表:list 格式 li = [1,2,3,4,5,6] 列表内部随意嵌套其他格式:字符串.列表.数字.元组.字典. 列表内部有序,且内容可更改 a = [1,2,3,4] a[0] = 5 ...
- java实现回溯算法
最近有在leetcode上面做算法题,已经遇到了两道回溯算法的题目,感觉一点思路都没有,现决定将java如何实现回溯算法做一次总结. 什么叫做回溯算法 (摘抄于百度百科) 回溯算法实际上一个类似枚举的 ...
- POJ_2065 SETI 【同余高斯消元】
一.题目 SETI 二.分析 给定一个模数,一串字符串,字符串长度为N,相当于是N个方程的答案,而这N个方程中有N个未知数,要求的就是这N个未知数的值,很显然的高斯消元,遇到模数和除法,用逆元就好. ...
- Flask面试问题
1,什么是Flask,有什么优点?概念解释Flask是一个Web框架,就是提供一个工具,库和技术来允许你构建一个Web应用程序.这个Web应用程序可以是一些Web页面,博客,wiki,基于Web的日里 ...
- 你只会用 map.put?试试 Java 8 compute ,操作 Map 更轻松!
今天栈长分享一个实用的 Java 8 开发技能,那就是 Map 接口中增加的 compute 方法,给 Map 集合计算更新用的. compute简介 如下所示,Java 8 在 Map 和 Conc ...
- 【关系抽取-R-BERT】定义训练和验证循环
[关系抽取-R-BERT]加载数据集 [关系抽取-R-BERT]模型结构 [关系抽取-R-BERT]定义训练和验证循环 相关代码 import logging import os import num ...
- JVM笔记 -- 来,教你类加载子系统
类加载子系统 类文件首先需要经过类加载子系统,进行加载,进类信息等加载到运行时数据区,生成Klass的实例. 在类加载子系统中有以下3个阶段操作(广义上的加载): 加载阶段 Bootstrap Cla ...
- Tomcat详解系列(2) - 理解Tomcat架构设计
Tomcat - 理解Tomcat架构设计 前文我们已经介绍了一个简单的Servlet容器是如何设计出来,我们就可以开始正式学习Tomcat了,在学习开始,我们有必要站在高点去看看Tomcat的架构设 ...
- java例题_37 有 n 个人围成一圈,顺序排号。从第一个人开始报数(从 1 到 3 报数),凡报到 3 的人退出圈子, 3 问最后留下的是原来第几号的那位。
1 /*37 [程序 37 报数] 2 题目:有 n 个人围成一圈,顺序排号.从第一个人开始报数(从 1 到 3 报数),凡报到 3 的人退出圈子, 3 问最后留下的是原来第几号的那位. 4 */ 5 ...
- Java 读取Word文本/段落格式属性
本文介绍通过Java后端程序代码来读取Word文本和段落格式的方法. 本次测试环境如下: Word版本:2013 编译环境:IntelliJ IDEA2018 Work库:free spire.doc ...