京东购物小程序商城（类京东商城小程序）
京东购物小程序商城（类京东商城小程序）八、渲染二级分类UI结构七、动态渲染一级分类页面结构四、API获取手机型号等数据五、美化item项六、获取分类页面数据
文章目录
一、新建cate分支（选读*）
二、添加编译模式
三、渲染页面基本结构
四、API获取手机型号等数据
五、美化item项
六、获取分类页面数据
七、动态渲染一级分类页面结构
八、渲染二级分类UI结构
九、渲染三级分类UI结构
十、切换一级分类重置滚动条位置
十一、点击三级分类跳转到商品页面
十二、分支的提交和合并
一、新建cate分支（选读*）之所以为了创建分支，也是养成良好的项目开发习惯，这样在开放项目井井有条
也可以跳过本节内容，不影响阅读观感
在根目录下，右键打开bash
基于 master 分支在本地创建 cate 子分支，用来开发和 cate 相关的功能：
- 创建新分支cate且跳转到该分支
git checkout -b cate
1
查看分支（前面有*代表着当前分支）
git branch
1
由于我们要开发的是cate 页面，所以我们将小程序编译模式修改启动页面 在cate，这样就不用每次都需要点击跳转了
- 生成基本的滑动页面结构
<template>
<view>
<!-- 包裹容器 -->
<view class="scroll-view-container">
<!-- 左侧container -->
<scroll-view class="scroll-view-left" scroll-y="true" style="height: 300px;">
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
</scroll-view>
<!-- 右侧container -->
<scroll-view scroll-y="true" class="scroll-view-right" style="height: 300px;">
<view></view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
<view>xxx</view>
</scroll-view>
</view>
</view>
</template>
<style lang="scss">
.scroll-view-container {
display: flex;
}
.scroll-view-left {
width: 200rpx;
}
.scroll-view-right {}
</style>
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
效果：
三、API获取手机型号等数据- 我们需要将整个scroll-view 的高度和手机屏幕高度一样，我们可以调用APIuni.getSystemSync() 得到该手机设备的信息（如手机型号，可用高度）
注意：是可使用的窗口高度，而不是屏幕高度（不包括navigationbar和tarbar）
在onLoad()生命周期函数调用API ，并在data节点定义数据，将可用窗口高度对其赋值给windowHeight
<script>
export default {
data() {
return {
//当前设备可用高度
windowHeight: ''
};
}
onLoad() {
const {
windowHeight: infoSys
} = uni.getSystemInfoSync()
this.windowHeight = infoSys
}
}
123456789101112131415
标签样式动态绑定
:style="{height: windowHeight 'px'}"
1
效果：
四、美化item项- 方法一（不建议）：
为每一个item项加上类选择器
鼠标选择标签，CTRL D选择全部（新版本是CTRL E)，如
在对该类选择器 修改样式
- 方法二（建议）
使用后代选择器，在.scroll-view-right view{} 修改样式
添加激活项样式&.active(用于配置选中时的样式）
样式
.scroll-view-left view {
text-align: center;
line-height: 120rpx;
background-color: lemonchiffon;
font-size: 12px;
// 激活项样式 后代选择器覆盖类选择器
// &选择器覆盖 所在选择器
&.active {
background-color: lawngreen;
// 相对定位 不改变文档布局移动
position: relative;
// 设置第一个元素
&::before {
// 内容为 一个空格
content: ' ';
// 块级元素
display: block;
background-color: #a00000;
height: 60rpx;
width: 6rpx;
// 绝对定位 移出正常文档流
position: absolute;
// 最左侧
top: 25%;
left: 0;
}
}
}
.scroll-view-right view{
text-align: center;
line-height: 80rpx;
background-color: aquamarine;
}
123456789101112131415161718192021222324252627282930313233
激活项
<view class="active">xxx</view>
1
效果：
五、获取分类页面数据- data定义数据
<script>
export default {
data() {
return {
//当前设备可用高度
windowHeight: ''
// 分类页数据
cateList: []
};
}
```
1234567891011
- onLoad生命周期函数调用 函数获取数据
...
onLoad() {
// 调取手机高度数据
const {
windowHeight: infoSys
} = uni.getSystemInfoSync()
this.windowHeight = infoSys
// 调取分类数据
this.getCateList()
}
...
1234567891011
- method定义 获取函数
...
methods: {
// 获取分类数据
async getCateList() { // async 异步不能使用箭头函数
const {data:res} = await uni.$http.get('/api/public/v1/categories')
// 判断是否赋值成功
if (res.meta.status != 200) return uni.$showmsg()
// 赋值
this.cateList = res.message
}
}
}
</script>
12345678910111213
获取成功
{
"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": "full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"
}]
}
]
}
]
"meta": {
"msg": "获取成功"
"status": 200
}
}
1234567891011121314151617181920212223242526272829303132333435六、动态渲染一级分类页面结构
激活项active实现思路：
在data节点定义数据active 对分类动态循环生成的索引与之比较，相同则在对应索引加上类active 并对分类点击帮绑定事件处理函数并对其传索引参数，动态修改active 如下
- 方法一：
组件传参
<template>
<view>
<!-- 包裹容器 -->
<view class="scroll-view-container">
<!-- 左侧container -->
<scroll-view class="scroll-view-left" scroll-y="true" :style="{height: windowHeight 'px'}">
<!-- 判断是否选中-active -->
<block v-for="(item index) in cateList" v-bind:key="index">
<!-- 传参方法一 -->
<view v-bind:class="(active === index ?'active' : '')" v-on:click="activeTap" :data-active=index>{{item.cat_name}}</view>
</block>
</scroll-view>
<!-- 右侧container -->
<scroll-view scroll-y="true" class="scroll-view-right" :style="{height: windowHeight 'px'}">
<view>xxx</view>
</scroll-view>
</view>
</view>
</template>
//函数
// 触击事件绑定
activeTap(options){
this.active = options.target.dataset.active
}
12345678910111213141516171819202122232425262728
- 方法二：
注意：绑定函数直接传参，这在原生小程序是不允许的，原生小程序中会把整体当成函数
<template>
<view>
<!-- 包裹容器 -->
<view class="scroll-view-container">
<!-- 左侧container -->
<scroll-view class="scroll-view-left" scroll-y="true" :style="{height: windowHeight 'px'}">
<!-- 判断是否选中-active -->
<block v-for="(item index) in cateList" v-bind:key="index">
<!-- 传参方法二 函数直接传参 这在原生小程序是不可以的 -->
<!-- <view v-bind:class="(active === index ?'active' : '')" v-on:click="activeTap(index)" >{{item.cat_name}}</view> -->
</block>
</scroll-view>
<!-- 右侧container -->
<scroll-view scroll-y="true" class="scroll-view-right" :style="{height: windowHeight 'px'}">
<view>xxx</view>
</scroll-view>
</view>
</view>
</template>
// 函数
// 触击事件绑定
activeTap(options){
// this.active = options.target.dataset.active
this.active = options
}
12345678910111213141516171819202122232425262728
效果：
在上文 【小程序项目开发 – 京东商城】uni-app 商品分类页面（上）5.1 章节接口数据格式可以看到，我们的数据，在一级分类下，存贮了二级分类，二级分类又存贮了三级分类，嵌套存贮。
1.1 动态渲染二级分类页面- 在data节点定义数据cateList2
data() {
return {
//当前设备可用高度
windowHeight: ''
// 分类页数据
cateList: []
// active 索引判断
active: 0
// 二级分类数据
cateList2: []
};
}
123456789101112
- 请求数据时在函数getCateList为其赋值（默认为第一个数据，动态数据变化在active
async getCateList() { // async 异步不能使用箭头函数
const {
data: res
} = await uni.$http.get('/api/public/v1/categories')
// 判断是否赋值成功
if (res.meta.status != 200) return uni.$showMsg()
// 一级分类赋值
this.cateList = res.message
// 二级分类赋值
this.cateList2 = this.cateList[0].children
}
}
123456789101112
- 在active激活项函数activeTap也对其进行动态数据绑定
methods: {
// 触击事件绑定
activeTap(options) {
// 传参方法一：
// this.active = options.target.dataset.active
// 传参方法二
this.active = options
// 动态修改二级列表
this.cateList2 = this.cateList[options].children
}
12345678910
效果：
- 结构
<!-- 右侧container -->
<scroll-view scroll-y="true" class="scroll-view-right" :style="{height: windowHeight 'px'}">
<view class="cate-level2" v-for="(item index) in cateList2" v-bind:key="index">
<!-- 标题 -->
<view class="cate-level2-title">{{'/ ' item.cat_name ' /'}}</view> <!-- / {{item.cat_name}} / -->
<!-- 项目容器 -->
<view>
<view class="cate-level2-list" v-for="(prd prdindex) in item.children" v-bind:key="prdindex">
<view class="cate-level2-prd">
<image v-bind:src="prd.cat_icon" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</scroll-view>
123456789101112131415
- 样式
.cate-level2-title {
font-weight: 700;
padding: 2px;
font-size: 14px;
}
12345
效果：
注意：在样式image组件的属性mode尽量不要使用，样式会很难调整
- 结构
<!-- 右侧container -->
<scroll-view scroll-y="true" class="scroll-view-right" :style="{height: windowHeight 'px'}">
<view class="cate-level2" v-for="(item i2) in cateList2" v-bind:key="i2">
<!-- 二级分类项目标题 -->
<view class="cate-level2-title">{{'/ ' item.cat_name ' /'}}</view> <!-- / {{item.cat_name}} / -->
<!-- 三级分类列表 -->
<view class="cate-level3-list">
<!-- 三级分类的item项 -->
<view class="cate-level3-list-item" v-for="(prd i3) in item.children" v-bind:key="i3">
<!-- 三级分类项目的图片 -->
<image v-bind:src="prd.cat_icon"></image>
<!-- 三级分类项目的文本 -->
<text>{{prd.cat_name}}</text>
</view>
</view>
</view>
</scroll-view>
1234567891011121314151617
- 样式
.scroll-view-right {
background-color: #fff;
.cate-level2-title {
font-weight: 700;
padding: 2px;
font-size: 14px;
text-align: center;
}
}
.cate-level2 {
padding: 10rpx;
padding-bottom: 20rpx;
}
// 三级分类样式
.cate-level3-list {
display: flex;
// 允许自动换行
flex-wrap: wrap;
.cate-level3-list-item {
// 整体三分之一
width: 33.33%;
display: flex;
flex-direction: column;
box-sizing: border-box;
justify-content: space-around;
align-items: center;
image {
width: 160rpx;
height: 160rpx;
margin-bottom: 5rpx;
}
text {
font-size: 25rpx;
}
}
}
12345678910111213141516171819202122232425262728293031323334353637383940414243444546
效果：
- 在data节点定义数据scrollTop
注意：对scrollTop 赋值前后值不变情况 下会没有效果，如果默认值为0，函数动态赋值也为0，那么组件就会默认为0，视为没有变化，这里解决方法是在0，1变化（1像素默认其为顶部，一点点偏差用户看不出来的）
data() {
return {
//当前设备可用高度
windowHeight: ''
// 分类页数据
cateList: []
// active 索引判断
active: 0
// 二级分类数据
cateList2: []
// 滚动条位置
scrollTop: 1
};
}
1234567891011121314
- 为scroll-view动态绑定scroll-top属性值
<!-- 右侧container -->
<scroll-view scroll-y="true" class="scroll-view-right" :style="{height: windowHeight 'px'}" v-bind:scroll-top="scrollTop">
12
- 切换一级分类，动态设置scrollTop
// 触击事件绑定
activeTap(options) {
// 传参方法一：
// this.active = options.target.dataset.active
// 传参方法二
this.active = options
// 动态修改二级列表
this.cateList2 = this.cateList[options].children
// 重置滚动条位置 动态变化
this.scrollTop = this.scrollTop === 0 ? 1 : 0
}
1234567891011
- 绑定事件函数
<!-- 三级分类的item项 -->
<view class="cate-level3-list-item" v-for="(prd i3) in item.children" v-bind:key="i3" v-on:click="gotoGoodsList(prd)">
12
- 定义函数跳转页面，并传参数 商品id
gotoGoodsList: prd => {
uni.navigateTo({
url: '/subpackages/goods_list/goods_list?cat_id=' prd.cat_id
})
1234
效果：
- git status 注释：查看当前文件状态
- git add . 注释： 提交所有文件到暂存区
- git commit -m "完成分类页面的开发" 注释：提交到本地仓库
- git push -u origin cate 注释：提交到远程仓库的cate分支
- git branch 注释：查看当前分支
- git checkout master 注释：切换到主分支
- git merge cate 注释：合并cate分支
- git push 注释：上传主分支到远程仓库
- git branch -d cate 注释：本地cate分支
✨谢谢你的阅读，您的点赞和收藏就是我创造的最大动力！✨
