uni-app之旅-day02-分类页面

敲啊敲95272024-10-05 14:14

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 创建cate分支
  • [4.1 渲染分类页面的基本结构](#4.1 渲染分类页面的基本结构)
    • [4.2 获取分类数据](#4.2 获取分类数据)
    • [4.3 动态渲染左侧的一级分类列表](#4.3 动态渲染左侧的一级分类列表)
    • [4.4 动态渲染右侧的二级分类列表](#4.4 动态渲染右侧的二级分类列表)
    • [4.5 动态渲染右侧的三级分类列表](#4.5 动态渲染右侧的三级分类列表)
    • [4.6 切换一级分类后重置滚动条的位置](#4.6 切换一级分类后重置滚动条的位置)
    • [4.7 点击三级分类跳转到商品列表页面](#4.7 点击三级分类跳转到商品列表页面)
    • [4.8 分支的合并与提交](#4.8 分支的合并与提交)

前言

提示：以下是本篇文章正文内容，下面案例可供参考

创建cate分支

基于 master 分支在本地创建 cate 子分支，用来开发分类页面相关的功能：

  • git checkout -b cate

4.1 渲染分类页面的基本结构

html 复制代码 
<view class="scroll-view-containe">
	<!-- 左侧滚动视图区域 -->
			<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>
			</scroll-view>
<!-- 右侧的滚动视图区域 -->
			<scroll-view class="left-scroll-view" scroll-y="true" :style="{height:wh + 'px'}">
				<view class="left-scroll-view-item active">zzzz</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>
				<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>
</view>
  • 动态计算窗口的剩余高度
javascript 复制代码 
data(){
	return{
		wh:0 
	}
},
onLoad(){
	//获取当前系统的信息
			const sysInfo = uni.getSystemInfoSync();
			console.log(sysInfo);
			//为wh窗口可用高度动态赋值
			this.wh = sysInfo.windowHeight
}
<style lang="scss">
.scroll-view-container {
	display:flex;
	  .left-scroll-view {
	  width:120px;
	   .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 获取分类数据

  • 在 data 中定义接收分类数据源
javascript 复制代码 
data(){
	return {
		cateList:[],
		//默认选中项的索引，默认第一项选中
		active:0
	}
},
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;
	}
}

4.3 动态渲染左侧的一级分类列表

  • 循环渲染列表结构
html 复制代码 
<scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}">
  <block v-for="(item, i) in cateList" :key="i">
    <view class="left-scroll-view-item">{{item.cat_name}}</view>
  </block>
</scroll-view>
  • 循环渲染结构时，为选中项动态添加 .active 类名
html 复制代码 
<scroll-view class="left-scroll-view" scroll-y :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>
  • 为一级分类的 Item 项绑定点击事件处理函数 activeChanged
html 复制代码 
<view :class="['left-scroll-view-item',i === active ? 'active':'']" @click="activeChanged(i)">{{item.cat_name}}</view>
javascript 复制代码 
methods:{
activeChanged(i){
	this.active = i
}
}

4.4 动态渲染右侧的二级分类列表

  • data 中定义二级分类列表的数据节点
javascript 复制代码 
data(){
	return{
		//二级分类列表数据源
		cateLevel2:[] 
	}
}
  • 修改 getCateList 方法，在请求到数据之后，为二级分类列表数据赋值
  • 修改 activeChanged 方法，在一级分类选中项改变之后，为二级分类列表数据重新赋值
javascript 复制代码 
methods:{
	async getCateList(){
				const {data:res} = await uni.$http.get('/api/public/v1/categories');
				console.log(res)
				if(res.meta.status !== 200) return uni.$showMsg()
				//转存数据
				this.cateList = res.message
				this.cateLevel2 = res.message[0].children;
			},

activeChanged(i){
this.active = i;
	this.cateLevel2 = this.cateList[i].children;
	console.log(this.cateLevel2)
}
}
  • 循环渲染右侧二级分类列表的 UI 结构
html 复制代码 
<!-- 右侧的滚动视图区域 -->
			<scroll-view class="left-scroll-view" scroll-y="true" :style="{height:wh + 'px'}">
				<view  class="cate-lv2" v-for="(item,i) in cateLevel2" :key="i">
					<view class="cate-lv2-title">
						/{{item.cat_name}}
					</view>
				</view>
				
			</scroll-view>
  • 美化二级分类的标题样式
javascript 复制代码 
.cate-lv2-title {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    padding: 15px 0;
  }

4.5 动态渲染右侧的三级分类列表

  • 在二级分类的 组件中，循环渲染三级分类的列表结构
html 复制代码 
					<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>

4.6 切换一级分类后重置滚动条的位置

javascript 复制代码 
data(){
	return{
		 //滚动条距离顶部的距离
		scrollTop:0
	}
}
  • 动态为右侧的 组件绑定 scroll-top 属性的值
html 复制代码 
<scroll-view class="right-scroll-view" scroll-y="true" :style="{height:wh + 'px'}" :scroll-top="scrollTop"></scroll-view>
  • 切换一级分类时，动态设置 scrollTop 的值
javascript 复制代码 
methods:{
	activeChanged(i){
		this.scrollTop = this.scrollTop ? 0:1
	}
}

4.7 点击三级分类跳转到商品列表页面

  • 为三级分类的 Item 项绑定点击事件处理函数如下
html 复制代码 
	<!-- item项 -->
						<view class="cate-lv3-item" v-for="(item3,i3) in item2.children" :key="i3" @click="gotoGoodsList(item3)"></view>
  • 定义事件处理函数
javascript 复制代码 
gotoGoodsList(item3){
				uni.navigateTo({
					url:'/subpkg/goods_list/goods_list?cid=' + item3.cat_id
				})
			}

4.8 分支的合并与提交

  • 将 cate 分支进行本地提交
javascript 复制代码 
git add .
git commit -m "完成了分类页面的开发"
  • 将本地的 cate 分支推送到码云
javascript 复制代码 
git push -u origin cate
  • 将本地 cate 分支中的代码合并到 master 分支并推送
javascript 复制代码 
git checkout master
git merge cate
git push
相关推荐
gnip6 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫7 小时前
写代码很6，面试秒变菜鸟？不卖课，面试官视角走心探讨
前端·后端·面试
excel8 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼8 小时前
抛弃自定义模态框：原生Dialog的实力
前端·javascript·github
hj5914_前端新手12 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法12 小时前
低代码编辑器项目设计与实现：以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku12 小时前
都2025年了，我们还有必要为了兼容性，去写那么多polyfill吗？
前端·javascript·css
yangcode12 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu12 小时前
【js篇】JavaScript 原型修改 vs 重写：深入理解 constructor的指向问题
前端·javascript
LuckySusu12 小时前
【js篇】如何准确获取对象自身的属性？hasOwnProperty深度解析
前端·javascript
热门推荐
01GitHub 镜像站点02UV 工具安装与国内镜像源配置指南0346个Nano-banana 精选提示词，持续更新中04Claude Code 平替：OpenAI发布 Codex CLI ，GPT-5 国内直接使用05UV安装并设置国内源06保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）07A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程08Spec-Kit 使用指南09解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题10KGG转MP3工具|非KGM文件|解密音频