进阶——下拉重新加载和上拉加载更多的功能实现

本文介绍了微信小程序中scroll-view组件如何实现下拉重新加载和上拉加载更多功能。通过设置相关参数,监听系统方法onPullDownRefresh和onReachBottom,以及动态更新数据源来实现这一功能。在下拉刷新时,重新加载第一页数据;上拉加载更多时,依次加载后续页面数据,直至所有数据加载完毕。
摘要由CSDN通过智能技术生成

WeChat小程序交流(QQ群:769977169

下拉重新加载和上拉加载更多的功能实现,主要体现在scroll-view组件的数据处理中。

当下拉重新加载时,即只加载分页中第一页数据;当上拉加载更多时,则不断的加载第二页、第三页、……、第N页的数据,直到没有数据了。

实现效果图


代码示例

xxx.wxjs

// 重新加载
  onPullDownRefresh: function () {
    console.log("reload data")

    this.data.typePage = 1;
    this.loadDataWithType(this.data.typeIndex, this.data.typePage);
  },


// 加载更多
  onReachBottom: function () {

    console.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

番薯大佬

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值