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. 一起来学习LiteOS中断模块的源代码

    摘要:本文带领大家一起剖析了LiteOS中断模块的源代码. 本文我们来一起学习下LiteOS中断模块的源代码,文中所涉及的源代码,均可以在LiteOS开源站点https://gitee.com/Lit ...

  2. 《进击吧!Blazor!》系列入门教程 第一章 7.图表

    <进击吧!Blazor!>是本人与张善友老师合作的Blazor零基础入门教程视频,此教程能让一个从未接触过Blazor的程序员掌握开发Blazor应用的能力. 视频地址:https://s ...

  3. arcgis for js 4.6加载本地发布好的2维地图

    我本地发布好的地图服务信息如下图所示: 我们在代码中使用到的url是图中所示的REST URL 加载代码如下: <!DOCTYPE html> <html> <head& ...

  4. 08、元组tuple

    元组(tuple) 是一个有序且不可变的容器,在里面可以存放多个不同类型的元素 元组是在最后多一个逗号,用于表示它是一个元组 tuple = (11,22,'阿斯顿','媚媚',) #后面多加一个逗号 ...

  5. E - Recursive sequence HDU - 5950 (矩阵快速幂)

    题目链接:https://vjudge.net/problem/HDU-5950 思路: 构造矩阵,然后利用矩阵快速幂. 1 #include <bits/stdc++.h> 2 #inc ...

  6. 攻防世界 reverse evil

    这是2017 ddctf的一道逆向题, 挑战:<恶意软件分析> 赛题背景: 员工小A收到了一封邮件,带一个文档附件,小A随手打开了附件.随后IT部门发现小A的电脑发出了异常网络访问请求,进 ...

  7. 设计vue3的请求实体工厂

    设计一个vue3的请求实体工厂 目录 设计一个vue3的请求实体工厂 描述 实现 构建一个基础请求方法 创建具体请求的方法 下面是对请求的声明文件 下面是请求的定义 generateRequest对请 ...

  8. TypeError: 'str' object does not support item assignment Python常见错误

    1.string是一种不可变的数据类型 2.尝试使用 range()创建整数列 有时你想要得到一个有序的整数列表,所以 range() 看上去是生成此列表的不错方式. 需要记住 range() 返回的 ...

  9. Elasticsearch索引模板-转载

    转载地址:https://dongbo0737.github.io/2017/06/13/elasticsearch-template/#similar_posts Elasticsearch索引模板 ...

  10. Myabtis-Plus之QueryWrapper常用方法

    AbstractWrapper 下的方法及使用 方法名 说明 使用 allEq(Map<R, V> params) 全部 =(或个别 isNull) allEq(params,true) ...