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(感谢分享)

微信小程序中的加载更多(即列表分页)的更多相关文章

  1. 微信小程序之上拉加载更多

    loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流 ...

  2. 微信小程序实现滚动加载更多

    1.需要用到的组件和api scroll-view(可滚动视图区域) wx.showToast(OBJECT)显示消息提示窗----显示loading小菊花用的 2.需要用到的属性 3.scrol-v ...

  3. 微信小程序上滑加载更多

    onReachBottom: function () { var that = this var limit = that.data.limit var count = that.data.count ...

  4. 微信小程序 - 上拉加载更多组件

    详情用例看demo,点击下载示例:loadmore

  5. 微信小程序之下拉加载和上拉刷新

    微信小程序下拉加载和上拉刷新两种实现方法 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性       ...

  6. 微信小程序下拉加载和上拉刷新两种实现方法

    方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性 设置js里onPullDownRefresh和onR ...

  7. 微信小程序---》分包加载

    [小程序]---分包加载   一.分包加载 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载 在构建小程序分包项目时,构建会输出一个或多个分包.每个使 ...

  8. 微信小程序上拉加载下拉刷新

    微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...

  9. 微信小程序下拉加载下一页

    小程序做得多了,有些常用功能就有必要记录一下 请看详解: 微信小程序之下拉触底时加载下一页 wxml参考: <scroll-view class='dataContainer' scroll-y ...

随机推荐

  1. 解决springMVC https环境 jstlview redirect时变为http请求的问题

    <property name="redirectHttp10Compatible" value="false" />

  2. 运用arcgis将标签图片(栅格图)转换为shp矢量文件

    最近在做图像分割校正,需要将ecognition分割好的shp文件做优化,但是如果直接对shp文件修改非常不友好,可以先对导出的tif标签图进行修改,然后将修改后的标签图转换为新的shp文件进行输出. ...

  3. vim下在插件emmet

    试了很多种方法,结果都没有用,最后找到了完美的解决方法! 1.方式1 1.1下载emmet并解压 1.2 cd /home/debian8/Downloads/emmet-vim-master/plu ...

  4. HTML标签解读

    因为最近在学习爬虫,那么在爬取网页内容时,就要求我们能够简单的看懂这个网页的基本结构,才能更好的去爬取我们所需要的内容. 这篇随笔也只是简单的说明了一些标签的含义. 标签关系 包含关系 eg:< ...

  5. 图解双链表(Java实现)

    原创公众号:bigsai 文章已收录在 全网都在关注的数据结构与算法学习仓库 前言 前面有很详细的讲过线性表(顺序表和链表),当时讲的链表以但链表为主,但实际上在实际应用中双链表的应用多一些就比如Li ...

  6. Prometheus时序数据库-报警的计算

    Prometheus时序数据库-报警的计算 在前面的文章中,笔者详细的阐述了Prometheus的数据插入存储查询等过程.但作为一个监控神器,报警计算功能是必不可少的.自然的Prometheus也提供 ...

  7. java例题_47 读取 7 个数(1—50)的整数值,每读取一个值,程序打印出该值个数的*

    1 /*47 [程序 47 打印星号] 2 题目:读取 7 个数(1-50)的整数值,每读取一个值,程序打印出该值个数的*. 3 */ 4 5 /*分析 6 * 1.多次读取---for循环 7 * ...

  8. WPF -- 使用当前进程打开自定义文件的一种方式

    问题描述 当双击打开自定义格式的文件时,希望使用当前正在运行的进程,而不是另起一个进程. 本文介绍一种方式解决如上问题,方案参考user3582780的解答 设置自定义文件格式的默认打开方式 参考链接 ...

  9. String类的使用2

    /*String:字符串,使用一对""引起来表示.1.String声明为final的,不可被继承2.String实现了Serializable接口:表示字符串是支持序列化的. 实现 ...

  10. 消息队列高手课,带你从源码角度全面解析MQ的设计与实现

    消息队列中间件的使用并不复杂,但如果你对消息队列不熟悉,很难构建出健壮.稳定并且高性能的企业级系统,你会面临很多实际问题: 如何选择最适合系统的消息队列产品? 如何保证消息不重复.不丢失? 如果你掌握 ...