(3).获取分类数据
- 在 data 中定义分类数据节点：
cate.vue
data() { return { // 分类数据列表 cateList: [] } }
- 调用获取分类列表数据的方法：
onLoad() { // 调用获取分类列表数据的方法 this.getCateList() }
- 定义获取分类列表数据的方法：
methods: { async getCateList() { const { data: res } = await uni.$http.get('/api/public/v1/categories') if (res.meta.status === 200) { console.log('cate页面分类数据->', res.message) this.cateList = res.message } else { return uni.$showMsg() } } }
(4).动态渲染左侧的一级分类列表
- 循环渲染列表结构并绑定选中项：
cate.vue
<view :class="['left-scroll-view-item',index===active ? 'active' : '']" @click="selectedHand(index)">
<!-- 左侧的滑动区域 --> <scroll-view scroll-y="true" class="left-scroll-view" :style="{height:wh+'px'}"> <block v-for="(item,index) in cateList" :key="index"> <view :class="['left-scroll-view-item',index===active ? 'active' : '']" @click="selectedHand(index)"> {{item.cat_name}} </view> </block> </scroll-view>
selectedHand(index) { this.active = index }
(5).动态渲染右侧的二级分类列表
cate.vue
methods: { // 获取分类的数据 async getCateList() { const { data: res } = await uni.$http.get('/api/public/v1/categories') if (res.meta.status === 200) { console.log('cate页面分类数据->', res.message) this.cateList = res.message // 赋值二级分类 this.cateList2 = res.message[0].children } else { return uni.$showMsg() } }, // 选择一级分类处理事件 selectedHand(index) { this.active = index // 赋值二级分类 this.cateList2 = this.cateList[index].children } }
(6).动态渲染右侧的三级分类列表
<!-- 右侧的滑动区域 --> <scroll-view scroll-y="true" :style="{height:wh+'px'}"> <view class="cate-lv2" v-for="(item2,index2) in cateList2" :key="index2"> <!-- 二级区域的标题 --> <view class="cate-lv2-title"> /{{item2.cat_name}}/ </view> <!-- 动态渲染三级分类的列表 --> <view class="cate-lv3-list"> <!-- 三级item --> <view class="cate-lv3-item" v-for="(item3,index3) in item2.children" :key="index3"> <!-- 三级分类图片 --> <image :src="item3.cat_icon"></image> <!-- 三级分类名字 --> <text>{{item3.cat_name}}</text> </view> </view> </view> </scroll-view>
.cate-lv3-item { // 让每一个子项目占据33.33 width: 33.33%; // 钟祥布局 display: flex; flex-direction: column; justify-content: center; align-items: center; // 下滑间隔为10px margin-bottom: 10px; image { width: 60px; height: 60px; } text { font-size: 12px; } } }
(7).修改Bug-(我们点击一级分类不回顶部)
cate.vue
scroll-top 属性
<!-- 右侧的滑动区域 --> <scroll-view scroll-y="true" :style="{height:wh+'px'}" :scroll-top="scrollTop"> <view class="cate-lv2" v-for="(item2,index2) in cateList2" :key="index2"> <!-- 二级区域的标题 --> <view class="cate-lv2-title"> /{{item2.cat_name}}/ </view> <!-- 动态渲染三级分类的列表 --> <view class="cate-lv3-list"> <!-- 三级item --> <view class="cate-lv3-item" v-for="(item3,index3) in item2.children" :key="index3"> <!-- 三级分类图片 --> <image :src="item3.cat_icon"></image> <!-- 三级分类名字 --> <text>{{item3.cat_name}}</text> </view> </view> </view> </scroll-view>
这里我们需要对scrollTop进行动态转换，因为我们初始化的时候就是0像素，如果一直不变的话，也就是不会触发scrool-top的，所以我们用1像素和0像素进行点击时切换。
data() { return { // 当前设备可用的高度 wh: 0, // 分类数据列表 cateList: [], // 动态选中的数据 active: 0, // 二级分类的列表 cateList2: [], // 当我们点击一级分类的时候，滑动条滚动到顶部 （这里的数据是距离顶部 x 像素） scrollTop: 0 }; }, // 选择一级分类处理事件 selectedHand(index) { this.active = index // 赋值二级分类 this.cateList2 = this.cateList[index].children // this.scrollTop = this.scrollTop === 0 ? 1 : 0 }
(8).点击三级分类跳转到商品列表页面
- 为三级分类的item绑定点击事件出粗粒函数
<!-- 三级item --> <view class="cate-lv3-item" v-for="(item3,index3) in item2.children" :key="index3" @click="getGoodsList(item)"> <!-- 三级分类图片 --> <image :src="item3.cat_icon"></image> <!-- 三级分类名字 --> <text>{{item3.cat_name}}</text> </view>
- 定义事件处理函数
<!-- 三级item --> <view class="cate-lv3-item" v-for="(item3,index3) in item2.children" :key="index3" @click="gettoGoodsList(item3)"> <!-- 三级分类图片 --> <image :src="item3.cat_icon"></image> <!-- 三级分类名字 --> <text>{{item3.cat_name}}</text> </view>
// 三级分类详情页处理函数 跳转到商品处理函数 gettoGoodsList(item3) { uni.navigateTo({ url: '/subpkg/goods_list/goods_list?cid=' + item3.cat_id }) }
(9).提交合并页面
1.将cate分支提交到本地仓库
git branch git add . git commit -m "完成了开发页面的提交"
2.将cate分支提交到码云仓库
git push -u origin cate
3.将本地的cate分支合并到master分支
git checkout master git add . git commit -m "完成了home开发" git merge cate 强制推送到远程仓库 git push -f origin master
4.删除分支
git branch -d cate
