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
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
2
3
4
5
获取全部店铺
getAllStoreList() {
return JSON.parse(window.localStorage.getItem('listStore')); // 全部列表
}
1
2
3
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
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
2
3
4
5
6
7
8
9
10
11
12
13
14