微信小程序 - 手写下拉刷新效果

问题

最近在仿写腾讯新闻小程序，在首页中分别有三个板块，它们是在一个页面中通过滑动tab的效果来进行切换。所以我用swiper + scroll-view来模仿这样的效果，但是在后面做下拉刷新的时候，发现有个很严重的问题，由于这三个板块是在一个页面之间进行切换的，所以下拉刷新会导致前面两个板块无法出现原生下拉的效果。（这种情况具体的原因我也不太清楚，如果有大佬知道的可以评论告诉我）

 然后我参考腾讯新闻小程序（安卓版是没有下拉的，我参考的是苹果版），发现他们貌似也是手写的下拉刷新，可能也是因为这个问题吧。为了尊重原作，并秉承程序员遇到问题不解决之全身不舒服的精神，于是便手写一个下拉刷新。

思路

1.通过在scroll-view上绑定touch事件，拿到手势滑动时的信息

2.（判断是否为下拉手势）touchStart 记录第一次触摸时的Y轴坐标，touchMove 记录滑动时的Y轴坐标，touchMoveY - touchStartY > 0 ，则为下拉手势

3.在页面上动态添加translateY ， 将移动的差值赋值到translateY上，让页面出现下拉移动的效果

4.设置刷新的目标值，到达该值后，下拉距离减缓增加。最后设置最大边界值，到达该值后，距离将不再增加

5.touchEnd中，判断是否到达刷新目标值，若到达则加载数据。未到到达，页面回弹，也就是页面的translateY设置为0

实现

准备好需要用到的值

Page({
    data:{
        touches:{
          startY:0,//起始Y轴坐标
          moveY:0,//移动过程Y轴坐标
          refreshHeight:0,//下拉刷新的距离 用于赋值到translate rpx
          refreshTargetHeight:140,//下拉刷新的目标值 rpx
          maxRefreshHeight:170//最大下拉距离  包括减缓距离 rpx
        }
    }
})

 为scroll-view绑定touch事件

    
  
    {{touches.refreshHeight>=touches.refreshTargetHeight?'释放刷新':'下拉刷新'}}
  

 
    
      {{item}}
    
  

  
    
      
        
      
    
    
      
        
      
    
    
      
        
      
    
  
 

 处理touch事件

//手写下拉刷新

  //判断是否为下拉手势
  isPullDown(){
    let {startY,moveY} = this.data.touches
    if(moveY > startY){
      return true
    }
    return false
  },
  touchStart(e){
    //记录初始Y轴坐标
    this.setData({
      ['touches.startY']:e.touches[0].pageY
    })
  },
  touchMove(e){
    let {refreshHeight,refreshTargetHeight,maxRefreshHeight} = this.data.touches
    //超出最大边界值 跳出
    if(refreshHeight >= maxRefreshHeight) return;
    //记录移动过程的Y轴坐标
    this.setData({
      ['touches.moveY']:e.touches[0].pageY
    })
    let {startY,moveY} = this.data.touches
    //计算下拉差值
    let distance = moveY - startY
    //到达目标值后  下拉距离减缓
    if(refreshHeight >= refreshTargetHeight){
      this.setData({
        ['touches.refreshHeight']:refreshHeight + (distance-refreshHeight) / 10
      })
      return
    }
    //符合下拉 动态赋值translate
    if(this.isPullDown()){
      this.setData({
        ['touches.refreshHeight']:distance
      })
    }
  },
  touchend(e){
    if(this.isPullDown()){
      let {refreshHeight,refreshTargetHeight} = this.data.touches
      //未到达目标值
      if(refreshHeight < refreshTargetHeight){
        this.setData({
          ['touches.refreshHeight']:0
        })
        console.log('未到达目标值 回弹')
        return 
      }
      //模拟加载数据
      console.log('加载数据中...')
      setTimeout(()=>{
        this.setData({
          ['touches.refreshHeight']:0
        })
        console.log('加载数据完成')
      },1500)
    }
  },

 

效果 

写在最后

UI效果写的比较简陋，但是大概效果还是能看的。代码也不算太难，细心看下都能理得清。由于这只是初步思路写出来的，所以在某些方面没有顾及到。如果大家觉得有什么地方可以优化，可以评论告诉我。

最后附上demo地址：https://github.com/ChanWahFung/tencentNew-mini-program （主要内容都在 /page/index 中）