Vue向下滚动加载更多数据-scroll-案例

74 阅读1分钟

blog.csdn.net/JackieDYH/a…

还有一个就是一页10天 然后手动添加

     queryParams: { typeName: `全部`, pageNum: 1 },
     device: "全部",


 if (this.device == this.queryParams.typeName) {
      } else {
        this.queryParams.pageNum = 1;
      }
      selectElectricalFirenew(this.queryParams).then((response) => {
        if (response.list.length) {
          if (this.device == this.queryParams.typeName) {
            this.data = [...this.data, ...response.list];
            console.log("1", this.data);
          } else {
            this.device = this.queryParams.typeName;
            this.data = response.list;
            console.log("2", this.data);
          }
        } else {
          // this.loading = false;
          //  this.$message.warning("已加载全部")
          this.titleMore = "已加载完毕";
     
        }

        // this.data = [...this.data, ...response.list];
        if (this.queryParams.typeName == "智慧") {
         
          this.currentlist = this.data;
          // this.currentlist = this.data.filter(r => {
          //   return r.parentDeviceTypeName !== "NB电气火灾";
          // });
            console.log(' this.currentlist', this.currentlist);
          // this.loading = false;
        }
  });
  
    watch: {
"queryParams.typeName": {
  handler(newValue) {
  
    this.titleMore = "加载更多";
    if (newValue == "智慧") {
      window.scrollTo(0, 0);
      this.data=[]
      this.getdata();
    }
    if (newValue == "全部") {
      window.scrollTo(0, 0);
      this.getList();
    }
    if (newValue == "剩余电流") {
      window.scrollTo(0, 0);
      this.getList();
    }
   
  deep: true,
},

}, 搜索功能的时候也要把这this.data清空 这个也是需要变化的