前言：
眼前朋友们对“商品列表页面”大约比较关怀，看官们都需要剖析一些“商品列表页面”的相关内容。那么小编同时在网摘上汇集了一些关于“商品列表页面””的相关内容，希望各位老铁们能喜欢，朋友们一起来了解一下吧！四、分类页面4.0 创建 cate 分支
运行如下的命令，基于 master 分支在本地创建 cate 子分支，用来开发分类页面相关的功能：
git checkout -b cate4.1 渲染分类页面的基本结构1. 页面结构
<template> <view> <view class="scroll-view-container"> <!-- 左侧的滚动视图区域 --> <scroll-view class="left-scroll-view" scroll-y="true" :style="{height: wh + 'px'}"> <!-- 以下内容只用来模拟滚动，非项目真正内容 --> <view class="left-scroll-view-item active">xxx</view> <view class="left-scroll-view-item">xxx</view> <view class="left-scroll-view-item">xxx</view> <view class="left-scroll-view-item">xxx</view> <view class="left-scroll-view-item">xxx</view> <view class="left-scroll-view-item">xxx</view> <view class="left-scroll-view-item">xxx</view> <view class="left-scroll-view-item">xxx</view> <view class="left-scroll-view-item">xxx</view> <view class="left-scroll-view-item">xxx</view> <view class="left-scroll-view-item">xxx</view> <view class="left-scroll-view-item">xxx</view> <view class="left-scroll-view-item">xxx</view> </scroll-view> <!-- 右侧滚动视图区域 --> <scroll-view class="right-scroll-view" scroll-y="true" :style="{height: wh + 'px'}"> <view class="left-scroll-view-item">xxx</view> <view class="left-scroll-view-item">xxx</view> <view class="left-scroll-view-item">xxx</view> <view class="left-scroll-view-item">xxx</view> <view class="left-scroll-view-item">xxx</view> <view class="left-scroll-view-item">xxx</view> <view class="left-scroll-view-item">xxx</view> </scroll-view> </view> </view> </template>2. 动态计算窗口剩余高度： <script> export default { data() { return { // 窗口的可用高度 = 屏幕高度 - navigationBar 高度 - tabBar 高度 wh: 0 }; }, onLoad() { // 获取当前系统的信息 const sysInfo = uni.getSystemInfoSync() // 为wh 窗口可用高度动态赋值 this.wh = sysInfo.windowHeight } } </script>3. 美化页面结构 <style lang="scss"> .scroll-view-container { display: flex; .left-scroll-view { width: 120rpx; .left-scroll-view-item { line-height: 60px; background-color: #f7f7f7; text-align: center; font-size: 12px; // 激活项的样式 &.active { background-color: #ffffff; position: relative; // 渲染激活项左侧的红色指示边线 &::before { content: ' '; display: block; width: 3px; height: 30px; background-color: #c00000; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } } } } } </style>测试结果如下：
4.2 获取分类数据
<script> export default { 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) return uni.$showMsg() // 转存数据 this.cateList = res.message // console.log(this.cateList) } } } </script>获取到的数据示例如下：
{ "message": [ { "cat_id": 1, "cat_name": "大家电", "cat_pid": 0, "cat_level": 0, "cat_deleted": false, "cat_icon": "", "children": [ { "cat_id": 3, "cat_name": "电视", "cat_pid": 1, "cat_level": 1, "cat_deleted": false, "cat_icon": "", "children": [ { "cat_id": 5, "cat_name": "曲面电视", "cat_pid": 3, "cat_level": 2, "cat_deleted": false, "cat_icon": "; } ] } ] } ], "meta": { "msg": "获取成功", "status": 200 } } 返回参数说明
参数名
类型
cat_id
int
分类id
cat_name
string
分类名称
children
array
子节点
cat_icon
string
图标
4.3 动态渲染左侧的一级分类列表1. 循环渲染列表结构
<template> <view> <view class="scroll-view-container"> <!-- 左侧的滚动视图区域 --> <scroll-view class="left-scroll-view" scroll-y="true" :style="{height: wh + 'px'}"> <block v-for="(item, i) in cateList" :key="i"> <view :class="['left-scroll-view-item', i === active ? 'active' : '']">{{item.cat_name}}</view> </block> </scroll-view> <!-- 右侧滚动视图区域 --> <scroll-view class="right-scroll-view" scroll-y="true" :style="{height: wh + 'px'}"> </scroll-view> </view>2. 在 data 中定义默认选中项的索引 <script> export default { data() { return { // 当前选中项的索引，默认第一项选中 active: 0 }; } } </script>3. 循环渲染结构时，为选中项动态添加 .active类名<template> <view> <view class="scroll-view-container"> <!-- 左侧的滚动视图区域 --> <scroll-view class="left-scroll-view" scroll-y="true" :style="{height: wh + 'px'}"> <block v-for="(item, i) in cateList" :key="i"> <view :class="['left-scroll-view-item', i === active ? 'active' : '']""> {{item.cat_name}}</view> </block> </scroll-view> <!-- 右侧滚动视图区域 --> <scroll-view class="right-scroll-view" scroll-y="true" :style="{height: wh + 'px'}"> </scroll-view> </view> </view></template>4. 为一级分类的 Item 项绑定点击事件处理函数 activeChanged<template> <view> <view class="scroll-view-container"> <!-- 左侧的滚动视图区域 --> <scroll-view class="left-scroll-view" scroll-y="true" :style="{height: wh + 'px'}"> <block v-for="(item, i) in cateList" :key="i"> <view :class="['left-scroll-view-item', i === active ? 'active' : '']" @click="activeChanged(i)"> {{item.cat_name}}</view> </block> </scroll-view> <!-- 右侧滚动视图区域 --> <scroll-view class="right-scroll-view" scroll-y="true" :style="{height: wh + 'px'}"> </scroll-view> </view> </view></template>5. 定义 activeChanged 事件处理函数，动态修改选中项的索引<script> export default { methods: { // 左侧选中项改变事件处理 activeChanged(i) { this.active = i } } }</script>4.4 动态渲染右侧的二级分类列表1. 在 data中定义二级分类列表的数据节点<script> export default { data() { return { // 二级分类列表 cateLevel2: [] }; } }</script>2. 修改 getCateList方法，在请求数据之后，为二级分类列表数据赋值<script> export default { methods: { // 获取分类列表数据的方法 async getCateList() { // 发起请求 const { data: res } = await uni.$http.get('/api/public/v1/categories') // 判断是否获取失败 if (res.meta.status !== 200) return uni.$showMsg() // 转存数据 this.cateList = res.message console.log(this.cateList) // 为二级分类赋值 this.cateLevel2 = res.message[0].children } } }</script>3. 修改 activeChanged方法，在一级分类项改变之后，为二级分类列表数据重新赋值<script> export default { methods: { // 左侧选中项改变事件处理 activeChanged(i) { this.active = i // 为二级分类列表重新赋值 this.cateLevel2 = this.cateList[i].children } } }</script>4. 循环渲染右侧二级分类列表的UI结构<template> <view> <view class="scroll-view-container"> ... <!-- 右侧滚动视图区域 --> <scroll-view class="right-scroll-view" scroll-y="true" :style="{height: wh + 'px'}"> <view class="cate-lv2" v-for="(item2, i2) in cateLevel2" :key="i2"> <view class="cate-lv2-title">{{item2.cat_name}}</view> </view> </scroll-view> </view> </view></template>5. 美化二级分类的标题样式<style lang="scss">.cate-lv2-title { font-size: 12px; font-weight: bold; text-align: center; padding: 15px 0;}</style>6. 测试结果4.5 动态渲染右侧的三级分类列表1. 在二级分类的 <view>组件中，循环渲染三级分类的列表结构<template> <view> <view class="scroll-view-container"> ... <!-- 右侧滚动视图区域 --> <scroll-view class="right-scroll-view" scroll-y="true" :style="{height: wh + 'px'}"> <view class="cate-lv2" v-for="(item2, i2) in cateLevel2" :key="i2"> <!-- 二级分类的标题 --> <view class="cate-lv2-title">/ {{item2.cat_name}} /</view> <!-- 动态渲染三级分类的列表数据 --> <view class="cate-lv3-list"> <!-- 三级分类 Item 项 --> <view class="cate-lv3-item" v-for="(item3, i3) in item2.children" :key="i3"> <!-- 图片 --> <image :src="item3.cat_icon"></image> <!-- 文字 --> <text>{{item3.cat_name}}</text> </view> </view> </view> </scroll-view> </view> </view></template>2. 美化三级分类的样式<style lang="scss">.cate-lv3-list{ display: flex; flex-wrap: wrap; .cate-lv3-item{ width: 33.33%; margin-bottom: 10px; display: flex; flex-direction: column; align-items: center; image{ width: 60px; height: 60px; } text{ font_size: 12px; } }}</style>测试效果如下：
图片url无法访问，出现问题，暂未解决
4.6 切换一级分类后重置滚动条的位置1. 在 data 中定义 滚动条距离顶部的距离
<script> export default { data() { return { ... // 滚动条距离底部的距离 scrollTop: 0, }; } }</script>2. 动态为右侧的 <scroll-view>组件绑定 scroll-top属性的值<scroll-view class="right-scroll-view" scroll-y="true" :style="{height: wh + 'px'}" :scroll-top="scrollTop"></scroll-view>3. 切换一级分类时，动态设置 scrollTop 的值// 左侧选中项改变事件处理activeChanged(i) { this.active = i this.cateLevel2 = this.cateList[i].children // 让 scrollTop 在 0 和 1 之间切换 this.scrollTop = this.scrollTop ? 0 : 1}4.7 点击三级分类跳转到商品列表页面为三级分类的 Item 项绑定点击事件处理函数<view class="cate-lv3-item" v-for="(item3, i3) in item2.children" :key="i3" @click="gotoGoodsList(item3)"></view>定义事件处理函数gotoGoodsList(item3){uni.navigateTo({
url: '/subpkg/goods_list/goods_list?cid=' + item3.cat_id
})
}
4.8 分支的合并与提交git add .git commit -m "完成了分类页面的开发"git push -u origin categit checkout mastergit merge categit push -u origin categit branch -d cate
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #商品列表页面
