小程序下拉刷新，上拉加载更多

1.在compontent里面创建一个文件，名字随意
wxml文件

<scroll-view class="message scroll-view client-pool-list" scroll-y="{{true}}" lower-threshold="1" bindtouchstart="touchstart" bindtouchmove="touchmove">
  <view class="pull-refresh {{pull.isLoading ? 'chu' : 'jin'}}" id="pull-refresh">
    <van-loading size="24px" type="spinner">{{pull.pullText}}</van-loading>
  </view>
  <slot></slot>
  <!-- slot接受内容 -->
  <view class="pull-refresh">
    <van-loading wx:if="{{push.isLoading}}" type="spinner">{{push.pullText}}</van-loading>
    <view class="size">{{push.pullText}}</view>
  </view>
</scroll-view>

wxss文件

image{
  height: 50rpx;
  width: 50rpx;
}
.chu{
  display: block;
}
.jin{
  display: none;
}
.size{
  font-size: 24rpx;
  text-align: center;
  color:#afafaf;
}
.pull-refresh{
  height: 100rpx;
  background: #f3f3f3;
  text-align: center;
  line-height: 100rpx;
}

json

{
  "component": true,
  "usingComponents": {
    "van-loading": "vant-weapp/loading/index"
  }
}

2.然后在需要的文件里面进行应用
wxss引入：

<scroll-y class="scroll-view" pull="{{pull}}" push="{{push}}" listLength="{{commentList.length}}"  bindtoload="toload" bindrefresh="refresh"> 
	//····此处包裹需要下拉或上拉的布局代码即可
</scroll-y>

js引入

data:{
	 pull: {
      isLoading: false,
      // loading: '../../image/common/pull_refresh.gif',
      pullText: '正在加载'
    },
    push: {
      isLoading: false,
      // loading: '../../image/common/pull_refresh.gif',
      pullText: '--上拉加载更多--'
    },
    commentList:[],//后端返回的数据
    page:1,
    flag: true  //开关 true表示可以请求数据
},
//请求的数据
getMerchant(type){
    this.setData({
      flag:false
    })
    network.request({
      url: api.merchant.list,
      method: "POST",
      data:{
        page:this.data.page,
        limit:"5" //每页请求几条数据
      },
      success: (res) => {
        if (res.data.code == 1) {
          console.log(res.data.data)
          console.log(type)
          if (type =="refresh"){
            setTimeout(() => {
              this.setData({
                'pull.pullText': '刷新完成',
                commentList: res.data.data
              })
            }, 1000)
            setTimeout(() => {
              this.setData({
                'pull.isLoading': false,
              })
            }, 2000)
          }else if (type =="toload"){
            if(res.data.data.length<5){
              let data = this.data.commentList.concat(res.data.data)
              this.setData({
                'push.isLoading': false,
                'push.pullText': '没有数据啦',
                commentList: data,
                flag:false
              })
            } else{
              let data = this.data.commentList.concat(res.data.data)
              this.setData({
                'push.isLoading': false,
                'push.pullText': '--上拉加载更多--',
                commentList: data,
                flag:true
              })
            }

          }else{
            console.log(res.data.data.length)
            if(res.data.data.length<5){
              this.setData({
                commentList: res.data.data,
                flag: false,
                isLoading: false,
                "push.pullText": '没有更多数据啦'
              })
            }else{
              this.setData({
                commentList: res.data.data,
                flag: true,
                isLoading: false
              })
            }
            
          }
        } else if(res.data.code==2){   //没有数据
         this.setData({
           'push.isLoading': false,
           'push.pullText': '没有数据啦',
           flag: false,
         })
        }
      }
    })
  },
  //下拉刷新
  refresh(e) {
    console.log('刷新', e)
    this.setData({
      'pull.isLoading': true,
      'pull.pullText': '正在加载',
      page:1
    })
    this.getMerchant(e.type)
  },
  //上拉加载更多
  toload(e) {
    if(this.data.flag){
      this.data.page++
      console.log('加载', e),
        this.setData({
          'push.isLoading': true,
          'push.pullText': '正在加载',
        })
        this.getMerchant(e.type)
    }
  }

json引入

{
  "usingComponents": {
    "scroll-y": "../../compontent/scroll/scroll" 
  },
  "enablePullDownRefresh": false, 
  "backgroundTextStyle": "dark" 
}