uniapp的mescroll-body组件与页面切换冲突.mescroll-body组件下拉异常,mescroll-body组件页面跳转回来后下滑屏幕直接触发了下拉刷新.

问题背景:

uniapp一个A页面中包含下拉刷新组件mescroll-body,当A页面滚动到某个位置然后进行了页面跳转,跳转到页面B,在B页面点击返回,返回A页面后,页面此时位置处于跳转去B页面前的位置,但是此时下拉页面,会触发下拉刷新组件的下拉刷新事件, 但是实际上下拉刷新事件应该在页面滚动条处于页面顶部才能出触发. 怎么解决这个bug呢?

分析:

个人认为应是页面跳转影响了mescroll-body组件对当前页面位置的判断. 在页面跳转后回来,mescroll-body组件以为页面回到了顶部,然后放开了下拉刷新,所以需要我们自己判断是否禁用和开启下拉刷新

解决思路:

因为我的下拉刷新事件是要在页面处于最顶部的时候才能触发的,而且,页面从B页面返回A页面:页面A的位置还是和跳转走之前相同,所以,只需要知道页面跳转到A之前是否处于页面顶部,就知道该不该禁用页面滚动事件. 如果跳走前在页面顶部,那回来的时候也在页面顶部,就放开下拉刷新事件,如果页面滚动了距离,则说明页面此时并没处于顶部,则禁用下拉刷新事件.

解决代码

首先:在A页面监听页面滚动事件,将页面滚动的距离保存起来,并且编写代码,如果页面滚动距离大于0,说明页面不在顶部,禁用下拉刷新组件.

  // 页面滚动事件,与其他生命周期平级位置
    onPageScroll(e) {
      console.log(e.scrollTop)
      this.scrollTop = e.scrollTop
      if (this.scrollTop>0) {
          this.mescroll.optDown.isLock=true
          console.log('禁用下拉刷新事件')
        }else{
          this.mescroll.optDown.isLock=false
          console.log('解开下拉刷新事件')
        }
    },

页面跳转走之前将页面滚动距离缓存起来:

uni.setStorageSync('scroolTop',this.scrollTop)

页面跳转回来后,判断当缓存的页面滚动距离是否大于0,此事可以借助uniapp的onshow生命周期进行编写代码,将逻辑写到onshow中.

      onShow() {
      this.scrollTop=uni.getStorageSync('scroolTop')
        if (this.scrollTop>0) {
          this.mescroll.optDown.isLock=true
          console.log('禁用下拉刷新事件')
        }else{
          this.mescroll.optDown.isLock=false
          console.log('解开下拉刷新事件')
        }
    },

至此,解决了此下拉刷新组件与页面跳转导致的冲突问题.

关于怎么动态禁用和解开mescroll-body组件的下拉刷新事件,看我写的这篇文章.:uniapp动态禁用mescroll-body组件的下拉刷新,或者动态禁用mescroll-body组件的上拉加载