微信小程序-聊天功能下拉加载更多数据（历史聊天内容出现在顶部）

2023-11-22 21:18:28

在开发小程序的时候接到一个需求，就是下拉加载更多数据。就像在微信聊天下拉顶部会出现数据。

在开发中有两种方式可以实现

　　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)
      })

    }
  },

实现的方法就是这样的，肯定有更好的方案去解决这种需求，希望能有大佬指点一下。无论是代码规范、方法、逻辑，哪里不合理都可以指出。

因为是公司项目不能把所有代码贴上来。请谅解

微信小程序-聊天功能下拉加载更多数据（历史聊天内容出现在顶部）

码农公寓

相关文章