小程序 scroll-view 触底事件不触发问题
问题描述
前端本来触底增加页数,每页写死的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; // rpxlet px = (150 / 750) * width + 1; // 转成 pxlet _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('没有更多数据了!');}}
......
