微信小程序利用scroll-view封装下拉刷新上划加载分页组件

在components文件夹中新建组件，文件结构如下图：

commonScrollY.wxml代码如下：

	
	
		
		{{pushLoadingText}}
	
	
	

commonScrollY.js代码如下：

Component({
  /**
   * 组件的属性列表
   */
  externalClasses: ['bottom-class'], //外部样式类
  options: {
    multipleSlots: true // 在组建定义时的选项中启用多slot支持
  },
  properties: {
    scrollTop: {
      type: String,
      value: ''
    },
    scrollHeight: {
      type: String,
      value: '100%',
      observer: function (newVal, oldVal) {
        if (newVal && newVal !== '0') {
          this.setData({ scrollEnable: true })
        }
      }
    },
    pushLoading: {
      type: Boolean,
      value: false,
      observer: function (newVal, oldVal) {
      }
    },
    pushLoadingText: {
      type: String,
      value: '上拉加载更多',
    },
    pullRefresh: {
      type: Boolean,
      value: false,
      observer: function (newVal, oldVal) {
      }
    },
    showBottomInfo: { // 显示底部信息
      type: Boolean,
      value: false
    },
    cusStyle: {
      type: String,
      value: '',
    },
    enablePullDownRefresh: {
      type: Boolean,
      value: true,
    }
  },
  /**组件所在页面的生命周期声明对象 */
  pageLifetimes: {
    show() { // 页面被展示
    },
  },
  /**
   * 组件的初始数据,私有数据，可用于模板渲染
   */
  data: {
    scrollEnable: false,
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onPulling(e) {
      this.triggerEvent('onPulling', { e: e })
    },

    onRefresh(e) {
      this.triggerEvent('onRefresh', { e: e })
    },

    onRestore(e) {
      this.triggerEvent('onRestore', { e: e })
    },

    onAbort(e) {
      this.triggerEvent('onAbort', { e: e })
    }
  }
})

commonScrollY.json代码如下：备注：/components/loading/loading是引用的weui

{
  "component": true,
  "usingComponents": {
    "my-loading": "/components/loading/loading"
  }
}

commonScrollY.wxs代码如下：

var newmark = startmark = 0
var status = 0
var bottomFlag = false
function touchstart(e, instance) {
    var pageY = (e.touches[0] || e.changedTouches[0]).pageY
    startmark = newmark = pageY
    //console.log(instance);
    // bottomFlag = false
}
function touchmove(e, instance) {
  console.log('touchmove1213,', bottomFlag)
    var pageY = (e.touches[0] || e.changedTouches[0]).pageY
    newmark = pageY

    var dis = newmark - startmark;

    if (dis <= -30 && bottomFlag) { // 上拉加载更多
      instance.triggerEvent('loadMore', { e: e })
      bottomFlag = false
    }
    // return false;
}
function onTolower (e, instance) { // 判断是否触底了
  console.log('触底了')
  bottomFlag = true
}
function propObserver(newValue, oldValue, ownerInstance, instance) {
    console.log('loadFinishCom===' + newValue);

    if (newValue) {
        ownerInstance.callMethod('hideLoading');
        // ownerInstance.selectComponent('.pull-refresh-loading').setStyle({
        //     display: 'none'
        // })
    }
}
module.exports = {
    touchstart: touchstart,
    touchmove: touchmove,
    onTolower: onTolower,
    propObserver: propObserver,
}

commonScrollY.wxss代码如下：

.scroll-content {
  position: relative;
  clear   : both;
}

.push-loading-content {
  height            : 100rpx;
  line-height       : 100rpx;
  width             : 100%;
  clear             : both;
  color             : var(--textColorGray);
  font-size         : 28rpx;
  text-align        : center;
  justify-content   : center;
  align-items       : center;
}

使用方式如下：

以订单列表orderList为例

      
          订单列表数据
      
    

在orderList.js中初始化以下数据：

data: {
    list: [],
    pageNum: 1,
    pageSize: 10,
    totalPage: -1,
    loaded: false,
    scrollHeight: '100%',
    pullRefresh: false,
    scrollEnable: false,
    pushLoading: false,
    pushLoadingText: '上拉加载更多',
    showBottomInfo: true,
    scrollTop: ''
  }

获取列表数据getData方法代码如下：

  // 获取列表数据
  getData: function (type) {
    if (!this.data.pushLoading && type === 'loadMore') {
      return false;
    }
    this.setData({
      pageNum: type == 'init' ? 1 : this.data.pageNum
    })
    //发送请求
    order.orderList(this.data.currentType, this.data.pageNum, this.data.pageSize).then(res => {
      this._freshing = false;
      let pageData = this.data.list;
      let pageNum = this.data.pageNum;
      let pushLoadingText = '上拉加载更多';
      if (!res.data.list.length) {
        pageNum--;
        pushLoadingText = '到底了';
      }
      this.setData({
        list: type == 'init' ? res.data.list : pageData.concat(res.data.list),
        pushLoading: false,
        pullRefresh: false,
        pushLoadingText: pushLoadingText,
        pageNum: pageNum,
        totalPage: res.data.pages,
        showBottomInfo: (res.data.list.length < this.data.pageSize) && pageNum == 1 ? false : true,
      })
    }).catch(err => {
    })
  },

下拉刷新的loading样式如下图：