vue-infinite-scroll 和el-radio-group 配合使用的坑

1.安装

npm i vue-infinite-scroll --save

2.main.js中引入


import infiniteScroll from 'vue-infinite-scroll'

Vue.use(infiniteScroll)

3.在.vue文件中使用

 
            汇总
            接收
            拒绝
   
 
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的处理

你可能感兴趣的:(vue-infinite-scroll 和el-radio-group 配合使用的坑)