Vue实战项目分类页 category

2020-08-11

1 获取数据

分析数据结构

1
2
3

/catagory  (无参数) ——》maitKey、miniWallkey 、title
/subcategory (maitKey)  ——》 subcategories ([])
/subcategory/detail (miniWallkey，type) ——》categoryDetail ({})

可以看出不同的 title 有不同的数据，将给个title 对应的数据存储在 categoryData 里面，数据之间通过 index 联系。简化数据结构如下

this.categoryData[i] = {
            subcategories: {},
            categoryDetail: {
              pop: [],
              new: [],
              sell: [],
            },
          };

在获取 title 数据之后，初始化 categoryData ，并获取第一组 subcategorie 的数据，之后获取 categoryDetail 数据

getcatagory(){
	存储 catagory 数据
	初始化categoryData
	subcategory第一组数据 : _getsubcategory(0)
}

_getsubcategory(index){
 maitKey = this.category[index].maitKey
 current = index
 
 	getsubcategory(maitKey) => {
 	存储 subcategory
    
     获取categoryDetail 的数据
     _getcategoryDetail("类型");
	}
}

_getcategoryDetail(type){
 miniWallkey
 getcategoryDetail(miniWallkey, type) {
 存储 categoryDetail 数据
}
}

对象可以通过[key] 去访问，当key和index一样时，就和数组差不多。当通过[key] 去获取数据的时候，得到的是一组组独立的对象，需要通过解构合并对象，比如下面这个例子

({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); //{c: 30, d: 40}

this.categoryData = { ...this.categoryData };

2 页面布局

flex 合理布局

flex 布局的时候，每个item 如果给定了宽度，不需要设置 felx-gorw，否则 item 的 width 属性失效。

页面溢出，出现滚动条，可能是 padding 或者 margin 的问题。