vue在下拉列表中的搜索框内,如何在获取到数据的时候只渲染10条,其他的用懒加载实现?

Question

获取到的数据只渲染10条,其他的用滚动事件来完成加载,然后就是搜索框实现模糊查询搜索,我现在用的是mand-mobile金融组件做的,模糊查询可以查询到数据,用的filter和indexOf来实现的,但是在删除相关信息后或者搜索其他内容,就不会返回列表数据了.

​
searchHandle(name, val) {
      this.searchVal = val;
      this.searchList = [];
      console.log(this.searchVal);
      if (val.trim()) {
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {

          let res = this.schoolData[0].filter((item) => {
            if (item.label.indexOf(val) !== -1) {
              this.searchList.push(item);
            }
          });
          console.log(this.searchList);
          this.schoolData = [this.searchList];
        }, 1000);
      }
    },

​

Answer 1

你好，模拟加载更多可以用slice 函数截取，然后加到展示的数组里面。

大概意思如下：

let allList=res.list;//获取接口的所有数据

let showList=allList.slice(0,10);//先展示10条

//滚动到底部再加载

let nextList=allList.slice(10,20);

showList.push(nextList);

//slice里面的参数，你可以设置了变量，让他每次滑道底部自动增长，还有一些需要判断的条件，自己实现下就可以了。

如有帮到你，请采纳下，谢谢咯