vue-infinite-scroll 和el-radio-gr

1.安装

npm i vue-infinite-scroll --save

2.main.js中引入

import infiniteScroll from 'vue-infinite-scroll'

Vue.use(infiniteScroll)

3.在.vue文件中使用

 <el-radio-group v-model="radioValue" @change="switchRadio">
            <el-radio-button label="0">汇总</el-radio-button>
            <el-radio-button label="1">接收</el-radio-button>
            <el-radio-button label="2">拒绝</el-radio-button>
   </el-radio-group>

 <ul
          ref="infinite"
          v-infinite-scroll="load"
          infinite-scroll-disabled="busy"
          infinite-scroll-distance="10"
         >
     <li v-for="(item,index) in dataList" :key="index"></li>
  </ul>

export default {
  data() {
    return {
      busy: true,//true 禁用
      pageindex: 1,
      pagesize: 10,
    }
}

load() {    
      this.busy = true;   
      this.pageindex++   
      stockreceiveApi
        .stock2list2(
          [],
          "ls",
          this.searchKey,
          this.dateRange[0],
          this.dateRange[1],
          this.standby_flag,
          this.acc_flag,
          this.pageindex,
          this.pagesize
        )
        .then(res => {
          if (res.flag) {
            this.firstRender = true;
            this.dataList = this.dataList.concat(res.data.rows);  
            if (this.pageindex >= Math.ceil(res.data.totalCount/10)){
              this.infiniteMsgShow = false // 切换底部提示信息
              this.busy = true;
              return false;
            }    
          }
        });
        this.busy = false;
    },

switchRadio(value) {
//tab切换的时候高度可能会停留在上一次滚动的位置，做以下处理
     this.$nextTick(() => {
         this.$refs.infinite.scrollTop=0
       })
}

过程中有几个坑
1.tab切换的时候高度可能会停留在上一次滚动的位置
2.busy的true和false的处理