vant是在进行移动端vue开发常用的一个轻量可靠的移动端组件库 vant官网地址：vant-ui.github.io/vant/v2/#/z…

问题：js二次调用list列表组件不执行滚动加载问题解决

当我们在使用list组件做滚动加载的时候，有时候会面临着通过分类去进行二次筛选，并进行二次列表的加载，在点击分类方法后，正确的执行list组件的滚动加载方法。

data部分

data(){
  return{
    tabsid:0,
    courseList:[],
    loading: false,
    finished: false,
    Squery: {
      pagesize: 4,
      page: 1,
      isok:''
    },
  }
},

分类方法

clicklis(item,index){
      this.courseList=[];
      this.Squery.page=1;
      //解决list组件不执行的问题，将loading设置为true；
      this.loading = true;
      this.finished = false;
      this.tabsid = index;
      this.Squery.isok=item.isok;
      this.onLoad();
},

list组件方法

//list组件方法，做延迟处理，否则list组件会直接加载，有bug；
onLoad(){
  setTimeout(() => {
    this.Courses();
  }, 500);
},
//列表，这里是我自己定义的接口方法，挂载到Vue.prototype自定义的；
Courses(){
  this.$api.user_couse.getrequest('get_list_course_me',this.Squery).then((res) => {
  	//这里是数据处理部分
    this.Squery.page+=1;
    this.courseList=this.courseList.concat(res.mydata.data);
    this.loading = false;
    if(this.Squery.page >= res.mydata.pageall){
        this.finished = true;
    };
  }).catch((err) => {
    this.loading = false;
    this.finished = true;
  });
},

本文原创，原创不易，如需转载，请联系作者授权。