在开发小程序的时候接到一个需求，就是下拉加载更多数据。就像在微信聊天下拉顶部会出现数据。
效果链接：https://www.tangxiaoyu.wang/videob45239a79a4d5a09ba2985a4127bfb24.mp4
在开发中有两种方式可以实现
1、利用页面自带的 上拉加载 onPullDownRefresh() 和 页面滑动事件 onPageScroll(Object) 组合
2、利用 scroll-view 去实现
因为我们实际的页面是顶部需要展示用户信息的，只能在页面的局部滑动的，所以采用的是 scroll-view 实现
逻辑是 :
一 、首次加载时存放两段数据，一段隐藏。一段展示，首次加载完成数据需要把 scroll-into-view="{{intoView}}" 的intoView重新渲染一下，否则不会直接跳到底部
<scroll-view class="scroll-interaction" scroll-y="{{ScrollY}}" bindscroll="scroll_scroll" scroll-top="{{scrollTop}}" scroll-into-view="{{intoView}}">
二、在触发触顶事件之后的步骤 ：1、 拿到隐藏数据的高度（或者之前就拿到） 2、拼接数据 3、利用setData同时渲染新数据并把scrollTop的值负值为隐藏数据的高度。4、获取新的需要隐藏的数据
三、利用 bindscroll 事件获取滑动的高度，不用他自带的 bindscrolltoupper 是因为 bindscrolltoupper 很恶心 会同时触发N次，特别是ios。
利用距离顶部高度判断什么时候触发触顶事件。我设置的为10以下，因为0的话安卓会出现有可能接收的参数不为0，导致无法触发置顶事件。ios没有这个问题，ios会上下弹。
为防止触顶事件多次执行 其中 ScrollLoading 用于锁定事件，在数据渲染完成之前 是不允许再次触发的。（具体滑动方法代码如下）
scroll_scroll: function(e) { var that = this if (that.data.ScrollLoading == 1){ //防止多次触发 return false }
if (e.detail.scrollTop < 10) { //触发触顶事件 that.data.ScrollLoading = 1 console.log('触发顶部事件')
//获取隐藏的view 高度 var query = wx.createSelectorQuery(); query.select('#hideview').boundingClientRect() query.exec(function (res) { var EventData = that.data.EventData //此数据为展示的数据 var HideData = that.data.HideData //此数据为隐藏数据 EventData = HideData.concat(that.data.EventData) //拼接数据
if (HideData == '' || !HideData) { //判断是否隐藏数据为空 that.setData({ NoMoreEvent:1, scrollTop: 0, }) return false } setTimeout(() => { //自行选择是否定时进行加载 that.setData({ EventData: EventData, scrollTop: res[0].height, }) that.data.ScrollLoading = 0 //允许再次触发触顶事件 that._getEventData() //请求新的数据 }, 1000) }) } },
实现的方法就是这样的，肯定有更好的方案去解决这种需求，希望能有大佬指点一下。无论是代码规范、方法、逻辑，哪里不合理都可以指出。
因为是公司项目 不能把所有代码贴上来。请谅解
小程序
