小程序 scroll-view 触底事件不触发问题

_jeneen2025-11-13 14:49

问题描述

前端本来触底增加页数，每页写死的10条数据，本来模拟器测试还好好的触发 scrolltolower 触底事件，但是用手机预览，看到10条数据显示的都没到底部，然后触底事件也不触发。

问题原因

scroll-view组件之上拉加载下拉刷新
 微信小程序获取某个元素的高度宽度
 微信小程序px和rpx之间的转换

主要原因：第一次获取的数据 item 的总高度比 scroll-view 的实际高度小，所以不触发 => 则需要计算当前高度能显示多少个 item, 即 pageSize 的大小。

问题解决

那就计算下 pageSize,

需要设定 scroll-view 的高度或者默认。本次是使用的 uview 的 u-list 组件，绑定 height 单位为 rpx ，所以要设置的话计算得到之后要转成 rpx 的大小。
默认获取到最小的 Item 的高度，进行除于计算。

大体代码如下：

复制代码

					......
					:height="height"
                    @scrolltolower="scrolltolower"
                    ......

onLoad() {
     // pagesize = (list 总高度 + 5px) / item 的最小高度
     let query = wx.createSelectorQuery();
     let width = uni.getSystemInfoSync().windowWidth;
     let itemHeight = 150; // rpx
     let px = (150 / 750) * width + 1; // 转成 px
     let _me = this;
     query
         .select('.my-list')
         .boundingClientRect(function(rect) {
             let num = Math.ceil(height / px);
             _me.pageSize = num;
             _me.currentPage = 1;
             _me.totalPage = 1;
             _me.getList();
         })
         .exec();
 },

......
	scrolltolower() {
		console.log('loadmore');
	            if (this.currentPage < this.totalPage) {
	                this.currentPage++;
	                this.getList('loadmore');
	            } else {
	                console.log('没有更多数据了！');
	            }
	}
......