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

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

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

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

 

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

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

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

上一篇:微信小程序——极点日历使用方法


下一篇:php小程序生成二维码