微信小程序 wepyjs 第三方下拉刷新&上拉加载组件

使用

安装组件

nrm use lord
npm login
npm install @tuhu/pulldownup --save

引入组件

<template>
  <pullDownUp @toBottom.user="lower" @toTop.user="upper">
    <view wx:for="{{list}}" slot="content" class="slotView">
      <view> 第{{index}}条数据 :{{item}}</view>
    </view>
  </pullDownUp>
</template>
<script>
  import wepy from 'wepy';
  import pullDownUp from '@tuhu/pulldownup';

  export default class Index extends wepy.page {
    components = {
      pullDownUp: pullDownUp
    };
  }
</script>

调用方法

//定义lower和upper方法，在lower和upper方法中操作数据
methods = {
  lower() {
  },
  upper(){
  }
}
//在页面的下拉刷新函数调用pullDownUp组件的reachTop方法
onPullDownRefresh(){
  this.$invoke('pullDownUp','reachTop');
  wx.stopPullDownRefresh()
}
//默认不使用下拉刷新需要invoke启用
this.$invoke('pullDownUp', 'reachBottom', {
  hasPullUp: true
});
//在页面的上拉加载函数调用pullDownUp组件的reachBottom方法
onReachBottom() {
  this.$invoke('pullDownUp','reachBottom',{
      noData:this.noData
  });
}
//设置loading的样式
onReachBottom() {
  this.$invoke('pullDownUp','reachBottom',{
      noData:this.noData,
      hasState:false,//默认为true，表示有加载的样式
      loadSetting:{
          text: '加载中...',
          textSize:'10rpx',
          position: 'bottom',
          hasLoading:false
      }
  });
}