小程序页面事件(下拉刷新和上拉触底)

一、下拉刷新事件

1.1. 什么是下拉刷新

下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。

1.2. 启用下拉刷新

enablePullDownRefresh

image.png

1.3. 配置下拉刷新窗口的样式

backgroundColor
backgroundTextStyle

image.png

1.4. 开启并关闭下拉刷新事件

image.png
image.png

在页面的.js 文件中,通过onPullDownRefresh()函数即可监听当前页面的下拉刷新事件
当处理完下拉刷新后,下拉刷新的 loading 效果会一直显示,不会主动消失,所以需要手动隐藏loading 效果。此时,调用 wx.stopPullDownRefresh()可以停止当前页面的下拉刷新。

二、上拉触底事件

2.1. 什么是上拉触底

上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。

2.2. 页面监听上拉触底事件

image.png

2.3. 配置上拉触底距离

onReachBottomDistance

image.png

  • 8
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序触底分页加载数据可以通过监听页面滚动事件来实现。 1. 在页面的onLoad生命周期函数中,初始化一个变量page,表示当前页面的页数,初始值为1。 2. 在页面的onReachBottom生命周期函数中,判断当前页面是否已经加载完所有数据,如果是,则直接返回;如果不是,则将page加1,发送请求获取下一页数据,并将新数据合并到原有数据数组中。 3. 在页面中渲染数据时,使用wx:for循环遍历数据数组。 以下是示例代码: ``` Page({ data: { dataList: [], // 数据数组 page: 1, // 当前页数 hasMoreData: true // 是否还有更多数据 }, onLoad() { this.loadData() }, onReachBottom() { if (!this.data.hasMoreData) return; this.setData({ page: this.data.page + 1 }) this.loadData() }, loadData() { wx.request({ url: 'https://xxx.com/api/data', data: { page: this.data.page }, success: res => { const newData = res.data.dataList const totalData = this.data.dataList.concat(newData) const hasMoreData = newData.length > 0 this.setData({ dataList: totalData, hasMoreData: hasMoreData }) } }) } }) ``` 在这个示例中,我们将数据请求放在了loadData函数中,当页面加载时和触底时都会调用该函数。请求返回后,将新数据合并到原有数据数组中,并判断是否还有更多数据,如果没有,则将hasMoreData改为false,避免继续请求。 在实际开发中,根据接口返回的数据格式和需要展示的数据结构,代码可能会有所不同,需要根据具体情况进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值