微信小程序——自定義上拉加載，下拉刷新 實現方法

開發中，有時列表使用<scroll-view>來實現滾動效果，然而在實現上拉加載，下拉刷新 的時候，希望可以在<scroll-view>中來實現拖拽效果，而不是使用wx.startPullDownRefresh()去展示整個頁面的拖拽

這裏選擇使用 

bindtouchstart   

bindtouchend   

catchtouchmove 

去實現這種效果， 代碼如下：

<!--index.wxml-->
<view class="box">
  <view class="listHeader">
    <view class="item" bindtap="sortFun" wx:for="{{titleArr}}" wx:key="name" data-index="{{index}}">
      <text>{{item.title}}</text>
    </view>
  </view>
  <!-- 手指拖動的距離，實現scroll-view的拖拽效果 -->
  <view style="height:{{touchMoveHeight}}px"></view>
  <scroll-view scroll-y class="list" wx:if="{{list.length>0}}" bindscrolltolower="lower" bindscroll="bindscroll" bindtouchstart="touchStart" bindtouchend="touchEnd" catchtouchmove="touchMove">
    <view class="item" wx:for="{{list}}" wx:key="id" wx:for-item="item">
      <text>{{item + 1}}</text>
      <text>張三</text>
      <text>男</text>
      <text>12</text>
    </view>
    <view class="loadall" wx:if="{{loadAll}}">已加載全部</view>
  </scroll-view>
</view>

//index.js
Page({
  data: {
    page: 1,
    pageSize: 50,
    totalNum: 100, //數據庫數組總條數
    loadAll: false,//是否已加載全部
    scrolltoupper: false,//判斷是否正在下拉刷新
    scrolltolower: false,//判斷是否正在上拉加載
    list: [],
    titleArr: [
      { title: '序號', property:'id'},
      { title: '姓名', property: 'name'},
      { title: '性別', property: 'sex'},
      { title: '年齡', property: 'age'},
    ],
    //是否觸發下拉刷新
    isTop: true,//是否在頂部
    touchStartY: 0,//剛觸碰屏幕時 距離頂部的距離
    touchMoveHeight: 0 //觸碰屏幕時 手指移動的距離
  },
  onLoad: function () {
    let self = this;
    self.loadData();
  },
  loadData : function () {
    wx.showLoading({
      title: '加載中'
    });
    let self = this;
    self.setData({
      scrolltoupper: false,
      scrolltolower: false,
      touchMoveHeight: 0
    })
    let page = self.data.page;
    let pageSize = self.data.pageSize;
    let totalNum = self.data.totalNum;
    let arr = self.data.list;
    //定時器爲了模仿實際開發中請求數據過程  使加載效果看起來好一些，
    setTimeout(function () {
      for (var i = arr.length; i < page * pageSize; i++) {
        arr.push(i)
      }
      self.setData({
        list: arr,
        scrolltoupper: true,
        scrolltolower: true,
        page: page + 1
      })
      wx.hideLoading();
      if (arr.length >= totalNum) {
        self.setData({
          loadAll: true
        })
      }
    },2000)
  },
  bindscroll: function (e) {
    //console.log(e)
    let self = this;
    self.setData({
      isTop: false
    })
    
  },
  touchStart: function (e) {
    //console.log(e)
    let self = this;
    self.setData({
      touchStartY: e.changedTouches[0].pageY,
      isTop: true
    })
  },
  touchMove: function (e) {
    //console.log(e)
    let self = this;
    let touchStartY = self.data.touchStartY;
    let touchMoveY = e.changedTouches[0].pageY;
    self.setData({
      touchMoveHeight: touchMoveY - touchStartY
    })
  },
  touchEnd: function (e) {
    //console.log(e)
    let self = this;
    let isTop = self.data.isTop;
    let touchStartY = self.data.touchStartY;
    let touchEndY = e.changedTouches[0].pageY;
    //console.log(isTop)
    //console.log(touchStartY)
    //console.log(touchEndY)
    if (touchEndY > touchStartY && isTop) {
      self.myPullDownRefresh();
    }
  },
  myPullDownRefresh: function () {
    let self = this;
    var scrolltoupper = self.data.scrolltoupper;
    if (scrolltoupper){
      self.onLoad();
    }
  },
  lower(e) {
    //console.log(e)
    let self = this;
    var scrolltolower = self.data.scrolltolower;
    var loadAll = self.data.loadAll;
    if (scrolltolower && !loadAll) {
      self.loadData();
    }
  },
})

/**index.wxss**/
page {
  background: #f3f3f3;
  overflow: hidden;
}
.listHeader, .list  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 0 50rpx;
  box-sizing: border-box;
}
.listHeader .item, .list .item {
  line-height: 96rpx;
  font-size: 32rpx;
  color: #282828;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list {
  height: 1000rpx;
  background:none;
  margin-top: 20rpx;
}
.list .item {
  color: #707070;
}
.loadall {
  line-height: 96rpx;
  font-size: 26rpx;
  color: #B8B8B8;
  text-align: center;
}

代碼下載地址：https://download.csdn.net/download/yu17310133443/11109333