商城切换分类以分页加载思想以及实现
实现思路:
1.0 定义全局存储的变量(页码,分类id,搜索关键字,存储数据的数组)
示例: 以小程序为例
data: {
pages: 1,
cate_id: '',
keyword: '',
dataList: []
}
2.0 封装请求列表的函数(根据 页码, 分类id,搜索关键词)
示例: 以小程序为列
getDataList() {
let cate_id = this.data.cate_id,
let keyword = this.data.keyword,
let pages = this.data.pages,
let dataList = this.data.dataList
myrequest('',{
cate_id: cate_id || '',
keyword : keyword || '',
pages: pages || 1
},res => {
if (dataList.length == 0) {
this.setData({
dataList: res.data.list
})
} else {
let newArr = res.data.list
this.setData({
dataList: this.data.dataList.concat(newArr)
})
}
}
3.0 调用封装的函数请求列表数据
a. 场景一: 首次进入列表页,加载全部数据
onShow() {
this.getDataList();
}
b. 场景二: 切换分类,加载分类下的数据
this.setData({
pages: 1,
cate_id: getCate_id
})
c. 场景三: 切换分类,滚动加载数据
this.setData({
page: nowPage
})
d. 场景四: 关键字搜索
this.setData({
page: 1,
keyword: getkeyword
})
f. 场景五: 关键字搜索,滚动加载数据
this.setData({
page: nowPage
})
4.0 总结: 面对复杂的数据处理,做统一管理,封装一个函数,记得在特定的场景下对数据做重置处理