微信小程序自定义 下拉刷新

微信小程序自定义 下拉刷新

小程序的scroll-view已经可以支持下拉刷新了，此文章仅留存纪念

微信自带的下拉刷新 小程序官方文档 解释的比较清楚了；直接进入自定义下拉刷新：

因为自定义BarTitle 的原因，小程序自带的下拉刷新，对整个 page 中的内容都会有移动；所以只能自己写了；为了方便使用直接写成组件的形式；直接附源码：

wxml （主要绑定一些事件）

<image src='loading.png' mode='widthFix' class='refurbis-top' style='width: {{translateY/2}}%;'></image>
<scroll-view 
  scroll-y
  class='scroll-view {{animateStatus ? "animate" : "" }}'
  style='transform: translateY({{translateY || 0}}px);'
  bindscrolltoupper='_upper'
  bindscrolltolower='_lower'
  bindtouchstart='_start'
  bindtouchmove='_move'
  bindtouchend='_end'
  bindscroll='_scroll'
>
  <slot />
</scroll-view>
<view class='load-bottom'>上拉可看到我</view>

css

.scroll-view{position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: #f6f6f6;z-index: 10;}
.animate{transition: all .4s;}
.refurbis-top{position: absolute;left: 50%;top: 0;z-index: 1;transform: translateX(-50%);width: 50%;}
.load-bottom{position: absolute;bottom: 0;z-index: 1;}

js

	
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    upperThreshold: {                   // 距离顶部多少时 触发 upper
      type: Number,
      value: 50
    },
    lowerThreshold: {                   // 距离底部多少时 触发 lower
      type: Number,
      value: 50
    },
    angle: {                            // 指定角度内可以移动
      type: Number,
      value: .5
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    refurbish: true,                        // 是否开启下拉刷新 true 是 false 否
  },

  /**
   * 组件的方法列表
   */
  methods: {
    _start: function (e) {                 // 记录开始位置
      // console.log(e, '_start');
      this.data.startClientX = Math.abs(e.changedTouches[0].clientX);
      this.data.startClientY = Math.abs(e.changedTouches[0].clientY);
    },
    _move: function (e) {                  // 是否进行移动
      // console.log(e, '_move');
      if (this.data.refurbish) {
        var clientX = Math.abs(e.changedTouches[0].clientX),
            clientY = Math.abs(e.changedTouches[0].clientY),
            startClientX = this.data.startClientX,
            startClientY = this.data.startClientY,
            upperThreshold = this.data.upperThreshold,
            defaultAngle = this.data.angle;
        var angle = (clientX - startClientX) / (clientY - startClientY);
        if (Math.abs(angle) < defaultAngle){
          let moveDistance = (clientY - startClientY) <= 0 ? 0 : (clientY - startClientY) / 2;
          if (moveDistance < 0) return false;             // 阻止方向滑出
          this.setData({
            translateY: moveDistance,
            animateStatus: false
          })
        }
      }
    },
    _end: function (e) {                    // 手势是否离开界面
      // console.log(e, '_end');
      let translateY = this.data.translateY;
      if (translateY > 50) this.triggerEvent('scrolltoupper');
      this.setData({
        animateStatus: translateY > 50,
        translateY: translateY > 50 ? 50 : 0
      })
      if (translateY > 50) setTimeout(() => {
        this.setData({
          translateY: 0,
          animateStatus: true,
        })
      }, 1500)
    },
    _upper: function(e){                    // 滚动到顶部触发
      // console.log(e, '_upper');
      this.data.refurbish = true;
    },
    _lower: function(e){                    // 滚动到底部触发
      // console.log(e, '_lower');
      this.triggerEvent('scrolltolower');
    },
    _scroll: function(e){                     // 是否滚动到顶部
      // console.log(e, '_scroll');
      var upperThreshold = this.data.upperThreshold;
      if (e.detail.scrollTop < upperThreshold) this.data.refurbish = true;
      else this.data.refurbish = false;
    }
  }
})

注意：组件 中 scroll-view 使用了 绝对定位，且宽高为 100%；
gitHub 地址：https://github.com/eitaqx/wx-refresh.git
在 scroll-view 不能使用的组件 请查看相关 文档

（希望这些可以对你有所帮助）