E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

在开发小程序的时候接到一个需求,就是下拉加载更多数据。就像在微信聊天下拉顶部会出现数据。效果链接: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)      })    }  }, 实现的方法就是这样的,肯定有更好的方案去解决这种需求,希望能有大佬指点一下。无论是代码规范、方法、逻辑,哪里不合理都可以指出。因为是公司项目 不能把所有代码贴上来。请谅解 小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序聊天功能下拉加载更多数据(历史聊天内容出现在顶部)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏