template view class=u-wrap view class=u-search-box u-search placeholder=搜索商品 v-model=keyword custom=searchGoods clear=clearSearchu-search view view class=u-text-center u-m-t-30 u-tabs list=so

页面组件包括搜索框、选项卡、左侧菜单和右侧商品列表，功能包括根据关键字搜索商品、根据分类筛选商品、根据销量/推荐/价格/评论排序商品、上拉加载更多商品、点击左侧菜单切换商品分类。

关键代码：

1. 点击中间的选项卡触发函数

changeSort(index){ // index为选项卡的编号，第一个为0 console.log(index); // currentSort不同就可以根据不同的编号来确定筛选条件 this.currentSort = index // 先初始化商品数据页和分页，在获取数据 this.goodsList = [] this.page = 1 this.getGoodsData() },

2. 获取商品数据

async getGoodsData() { const params = { title: this.keyword, page: this.page, } // 判断参数是否有分类id，如果当前分类current不是0的话就加上这个分类id if(this.current) params.category_id = this.current // 判断是否有排序的参数，有的话就设置上参数,默认排序的参数currentSort是0 if(this.currentSort == 0) {params.sales = 1} else if(this.currentSort == 1) {params.recommend = 1} else if(this.currentSort == 2) {params.price = 1} else if(this.currentSort == 3) {params.comments_count = 1} const res = await this.$u.api.goodsList(params) this.categoryList = res.categories this.goodsList = [...this.goodsList, ...res.goods.data] this.isLastPage = res.goods.next_page_url ? false : true },

3. 点击左边的栏目切换

async swichMenu(cid) { if (cid == this.current) return; this.current = cid; // 切换左侧后重新请求数据 this.page = 1 this.getGoodsData() this.goodsList = [] },

样式：

页面样式包括搜索框样式、选项卡样式、左侧菜单样式、右侧商品列表样式。

组件内部通信：

在点击左侧菜单切换商品分类时，需要重新请求商品数据，因此需要调用getGoodsData()方法；在滚动到底部时，需要加载更多商品数据，因此需要调用scrollEvent()方法