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文件中使用

         ref="infinite"

         v-infinite-scroll="load"

         infinite-scroll-disabled="busy"

         infinite-scroll-distance="10"

        >

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的处理

本文章由javascript技术分享原创和收集