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

问题描述

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

问题原因

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

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

问题解决

那就计算下 pageSize,

1. 需要设定 scroll-view 的高度或者默认。本次是使用的 uview 的 u-list 组件，绑定 height 单位为 rpx ，所以要设置的话计算得到之后要转成 rpx 的大小。
2. 默认获取到 最小的 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('没有更多数据了！');}}
......