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
相关推荐
i听风逝夜20 分钟前
Web 3D地球实时统计访问来源
前端·后端
iMonster24 分钟前
React 组件的组合模式之道 (Composition Pattern)
前端
呐呐呐呐呢32 分钟前
antd渐变色边框按钮
前端
元直数字电路验证1 小时前
Jakarta EE Web 聊天室技术梳理
前端
wadesir1 小时前
Nginx配置文件CPU优化（从零开始提升Web服务器性能）
服务器·前端·nginx
牧码岛1 小时前
Web前端之canvas实现图片融合与清晰度介绍、合并
前端·javascript·css·html·web·canvas·web前端
灵犀坠1 小时前
前端面试八股复习心得
开发语言·前端·javascript
9***Y481 小时前
前端动画性能优化
前端
网络点点滴1 小时前
Vue3嵌套路由
前端·javascript·vue.js
牧码岛1 小时前
Web前端之Vue+Element打印时输入值没有及时更新dom的问题
前端·javascript·html·web·web前端
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03UV安装并设置国内源04【保姆级教程】免费使用Gemini3的5种方法！免翻墙/国内直连05Linux下V2Ray安装配置指南06安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）07“我的电脑”图标没了怎么办 4种方法找回08全球最强模型Grok4，国内已可免费使用！（附教程）09Gemini 3.0 Pro Preview 实测报告10KGG转MP3工具|非KGM文件|解密音频