商城切换分类以及分页加载的实现

商城切换分类以分页加载思想以及实现

	实现思路： 
		1.0 定义全局存储的变量（页码，分类id,搜索关键字，存储数据的数组）
			示例： 以小程序为例
			data: {
				pages: 1,   		// 页码
				cate_id: '',		// 分类id
				keyword: '',		// 搜索关键词
				dataList: []		// 数据列表
			}
		2.0 封装请求列表的函数（根据 页码， 分类id,搜索关键词）
			示例： 以小程序为列
			getDataList() {
				// a. 获取全局变量中的  页码,分类id,搜索关键词
				let cate_id = this.data.cate_id,
				let keyword = this.data.keyword,
				let pages = this.data.pages,
				let dataList = this.data.dataList
				// b. 发送请求(myrequest 为自己封装的网络请求)
				myrequest('',{
					cate_id: cate_id || '',
					keyword : keyword || '',
					pages: pages || 1
				},res => {
					if (dataList.length == 0) { 
					// 数组为空出现的情况:
					// a. 切换分类后的第一次渲染，（页码重置，分类赋值）
					// b. 或者根据关键字搜索后的第一次渲染（页码重置，关键字赋值）
					// c. 切换分类后又搜索关键字进行赛选后的第一次渲染（页码重置）
					// d. 在以上出现的情况中记得重置部分数据（页码必须重置为1）
						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 总结： 面对复杂的数据处理，做统一管理，封装一个函数，记得在特定的场景下对数据做重置处理