【微信小程序页面出现onReachBottom不触发的情况】

博客主要讲述微信小程序页面中onReachBottom不触发的情况。经分析,源代码中height设置为100vh会导致滑动无法触底,进而无法触发该事件,修改css即可解决此问题。

微信小程序页面出现onReachBottom不触发的情况

源代码的情况是
在这里插入图片描述

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
	console.log("-------");
},

.page {
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
}

无法触发的原因是:height设置为100vh,会导致滑动不会触底。
修改一下css就会触发。

.page {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

在这里插入图片描述

### 微信小程序 `onReachBottom` 触底加载实现方法 在微信小程序中,通过使用 `onReachBottom` 方法可以轻松实现触底加载功能。此方法会在页面触底时被触发,从而允许开发者在此处编写逻辑以加载更多数据。 为了确保初次加载与后续触底加载能够区分处理,在定义用于获取数据的方法时引入一个布尔类型的参数 `reachBottom` 是一种有效的方式[^1]。当该参数为 `false` 时表示首次加载;反之则表示由触底行为引发的新一轮数据请求。 具体来说: - **初始化设置**:在 onLoad 函数中设定初始状态,比如页码、是否正在加载以及是否有更多数据等标志位。 - **触底检测**:一旦发生触底事件,则调用 onReachBottom 来增加页码,并再次发起网络请求以获得额外的数据项。此时应传递 true 给负责抓取资料的函数作为 reachBottom 参数值。 - **合并新旧数据**:每次成功接收到服务器返回的信息后,需将这些新增加的内容追加到已存在的列表末端而是覆盖原有内容。这可以通过创建一个新的数组 oldData 存储之前的结果,再将其与 newData 合并成完整的 listArr 数组来完成[^4]。 下面是一个简单的代码示例展示上述过程: ```javascript Page({ data: { dataList: [], // 列表数据 pagenum: 1, // 当前页数,默认从第一页开始 isLoading: false, hasMore: true }, onLoad(options) { this.getData(false); }, getData(reachBottom){ const that = this; if (!this.data.hasMore || this.data.isLoading) return; util.request({ url: 'your_api_endpoint', method:'GET', data:{ page:this.data.pagenum } }).then(res => { let newList = res.data.list; if(newList.length === 0){ this.setData({hasMore : false}); wx.showToast({ title:"没有更多啦", icon:"none" }); return ; } let oldData = [...that.data.dataList]; let newData = oldData.concat(newList); that.setData({ dataList:newData , pagenum: !reachBottom ? 1 : (parseInt(that.data.pagenum)+1), isLoading:false }); }) }, onReachBottom(){ this.setData({isLoading:true}); this.getData(true); } }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值