https://www.jianshu.com/p/4cd4f74a0b20 (opens new window)
筛选

   fiterStore(list, keyword) {
      const arr = [];
      for (let i = 0; i < list.length; i++) {
        if (list[i].storeName.indexOf(keyword) >= 0 || list[i].storeNo.indexOf(keyword) >= 0) {
          arr.push(list[i]);
        }
      }

      return arr;
    }
        //调用
    this.allStoreList = this.fiterStore(this.getAllStoreList(), this.storeName);
1
2
3
4
5
6
7
8
9
10
11
12

分页

    pagination(array, pageNo, pageSize) {
      const offset = (pageNo - 1) * pageSize;
      const data = (offset + pageSize >= array.length) ? array.slice(offset, array.length) : array.slice(offset, offset + pageSize);
      return data;
    },
1
2
3
4
5

获取全部店铺

    getAllStoreList() {
      return JSON.parse(window.localStorage.getItem('listStore')); // 全部列表
    }
1
2
3

上拉加载

    onLoad() {
      this.loading = true;
      this.pageNumber += 1;
      setTimeout(() => {
        this.storeList = this.storeList.concat(this.pagination(this.allStoreList, this.pageNumber, this.pageSize)); // 店铺列表
        this.loading = false;
      }, 200);

      if (this.storeList.length >= this.allStoreList.length) {
        this.finished = true;
      } else {
        this.finished = false;
      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

模糊查询店铺名称

watch:{
 storeName(val) {
      if (val) {
        this.allStoreList = this.fiterStore(this.getAllStoreList(), this.storeName);
        this.storeList = [];
        this.getStoreList();
      } else {
        // 数据为空的时候查看全部数据
        this.allStoreList = this.getAllStoreList();
        this.storeList = [];
        this.getStoreList();
      }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
lastUpdate: 5/13/2021, 5:35:14 PM