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

1 引用页面

wxml

<pull-down-refresh id="refreshScroll" bindscrolltoupper="refresh">
    <view slot="content">
        ...
    </view>
</pull-down-refresh>

wxss

@import "/pages/common/pullDownRefresh";

json

"usingComponents": {
    "pull-down-refresh": "/pages/common/pullDownRefresh"
}

js

onPageScroll(e) {
    this.selectComponent("#refreshScroll").onPageScroll(e)
},

refresh() {
    this.data.list = []
    this.data.page = 1
    this.getList()

    wx.nextTick(() => {
      if (!this.data.loading) {
        setTimeout(() => {
          this.selectComponent("#refreshScroll").stopRefresh()
        }, 500);
      }
    })
},

2 自定义组件

wxml

<view class="scroll" bindtouchstart="touchStart" bindtouchmove="touchMove"   bindtouchend="touchEnd">
  <view class="animation">
    <van-loading wx:if="{{ state != -1 }}" size="16px" type="spinner" color="#2a59c5">
      {{ state === 0 ? '下拉刷新' : (state === 1? '松开刷新' : '刷新中') }}
    </van-loading>
  </view>
  <view style="transform: translateY({{ translateHeight }}rpx)">
    <slot name="content"></slot>
  </view>
</view>

wxss

.animation {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100rpx;
  margin-bottom: -100rpx;
  background-color: #F7F7F7;
}

.loading {
  width: 30rpx;
  height: 30rpx;
  border: 6rpx solid #333333;
  border-bottom: #cccccc 6rpx solid;
  border-radius: 50%;
  animation: load 1.1s infinite linear;
}

.van-loading .van-loading__text {
  color: #2a59c5;
}

.pullDownRefresh--white-text .van-loading__text {
  color: #ccc;
}

@keyframes load {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.tip {
  margin-left: 10rpx;
  color: #666;
}

json

{
  "component": true
}

js

let lastY = 0 // 上一次滚动的位置
let scale = 750 / wx.getSystemInfoSync().windowWidth // rpx转化比例

Component({
  options: {
    multipleSlots: true
  },
  data: {
    scrollTop: 0,
    translateHeight: 0, // 平移距离
    state: -1
  },
  properties: {
    // 触发下拉刷新的距离
    upperDistance: {
      type: Number,
      value: 100
    },
  },
  methods: {
    // 监听滚动，获取scrollTop
    onPageScroll(e) {
      this.data.scrollTop = e.scrollTop
    },
    
    touchStart(e) {
      lastY = e.touches[0].clientY
    },

    touchMove(e) {
      let clientY = e.touches[0].clientY
      let offset = clientY - lastY
      if (this.data.scrollTop > 0 || offset < 0) return
      this.data.translateHeight += offset
      this.data.state = 0
      lastY = e.touches[0].clientY
      if (this.data.translateHeight - this.data.scrollTop * scale > this.data.upperDistance) {
        this.data.state = 1
      }
      this.setData({
        translateHeight: this.data.translateHeight,
        state: this.data.state
      })
    },

    touchEnd() {
      if (this.data.translateHeight - this.data.scrollTop * scale > this.data.upperDistance) {
        this.setData({
          translateHeight: 100
        })
        this.triggerEvent('scrolltoupper')
        this.setData({
          state: 2
        })
      } else if (this.data.scrollTop <= 0) {
        this.stopRefresh()
      }
    },

    //  停止刷新
    stopRefresh() {
      this.setData({
        translateHeight: 0,
        state: -1
      }, () => {
        wx.pageScrollTo({
          scrollTop: 0,
          duration: 0
        })
      })
    }
  }
})