uni-app之旅-day02-分类页面
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- 前言
- 创建cate分支
- 4.1 渲染分类页面的基本结构
- 4.2 获取分类数据
- 4.3 动态渲染左侧的一级分类列表
- 4.4 动态渲染右侧的二级分类列表
- 4.5 动态渲染右侧的三级分类列表
- 4.6 切换一级分类后重置滚动条的位置
- 4.7 点击三级分类跳转到商品列表页面
- 4.8 分支的合并与提交
前言
提示:以下是本篇文章正文内容,下面案例可供参考
创建cate分支
基于 master 分支在本地创建 cate 子分支,用来开发分类页面相关的功能:
- git checkout -b cate
4.1 渲染分类页面的基本结构
<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>
- 动态计算窗口的剩余高度
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 中定义接收分类数据源
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 动态渲染左侧的一级分类列表
- 循环渲染列表结构
<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 类名
<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
<view :class="['left-scroll-view-item',i === active ? 'active':'']" @click="activeChanged(i)">{{item.cat_name}}</view>
methods:{
activeChanged(i){this.active = i
}
}
4.4 动态渲染右侧的二级分类列表
- data 中定义二级分类列表的数据节点
data(){return{//二级分类列表数据源cateLevel2:[] }
}
- 修改 getCateList 方法,在请求到数据之后,为二级分类列表数据赋值
- 修改 activeChanged 方法,在一级分类选中项改变之后,为二级分类列表数据重新赋值
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.messagethis.cateLevel2 = res.message[0].children;},activeChanged(i){
this.active = i;this.cateLevel2 = this.cateList[i].children;console.log(this.cateLevel2)
}
}
- 循环渲染右侧二级分类列表的 UI 结构
<!-- 右侧的滚动视图区域 --><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>
- 美化二级分类的标题样式
.cate-lv2-title {font-size: 12px;font-weight: bold;text-align: center;padding: 15px 0;}
4.5 动态渲染右侧的三级分类列表
- 在二级分类的 组件中,循环渲染三级分类的列表结构
<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 切换一级分类后重置滚动条的位置
data(){return{//滚动条距离顶部的距离scrollTop:0}
}
- 动态为右侧的 组件绑定 scroll-top 属性的值
<scroll-view class="right-scroll-view" scroll-y="true" :style="{height:wh + 'px'}" :scroll-top="scrollTop"></scroll-view>
- 切换一级分类时,动态设置 scrollTop 的值
methods:{activeChanged(i){this.scrollTop = this.scrollTop ? 0:1}
}
4.7 点击三级分类跳转到商品列表页面
- 为三级分类的 Item 项绑定点击事件处理函数如下
<!-- 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 分支的合并与提交
- 将 cate 分支进行本地提交
git add .
git commit -m "完成了分类页面的开发"
- 将本地的 cate 分支推送到码云
git push -u origin cate
- 将本地 cate 分支中的代码合并到 master 分支并推送
git checkout master
git merge cate
git push
相关文章:
uni-app之旅-day02-分类页面
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言创建cate分支4.1 渲染分类页面的基本结构4.2 获取分类数据4.3 动态渲染左侧的一级分类列表4.4 动态渲染右侧的二级分类列表4.5 动态渲染右侧的三级分类列表4.6 …...

鸿蒙harmonyos next flutter通信之BasicMessageChannel获取app版本号
本文将通过BasicMessageChannel获取app版本号,以此来演练BasicMessageChannel用法。 建立channel flutter代码: //建立通道 BasicMessageChannel basicMessageChannel BasicMessageChannel("com.xmg.basicMessageChannel",StringCodec());…...

【文件增量备份系统】MySQL百万量级数据量分页查询性能优化
🎯 导读:本文针对大数据量下的分页查询性能问题进行了深入探讨与优化,最初查询耗时长达12秒,通过避免全表计数及利用缓存保存总数的方式显著提升了浅分页查询速度。面对深分页时依然存在的延迟,采用先查询倒数第N条记录…...

音视频入门基础:FLV专题(12)——FFmpeg源码中,解析DOUBLE类型的ScriptDataValue的实现
一、引言 从《音视频入门基础:FLV专题(9)——Script Tag简介》中可以知道,根据《video_file_format_spec_v10_1.pdf》第80到81页,SCRIPTDATAVALUE类型由一个8位(1字节)的Type和一个ScriptDataV…...

【AI知识点】分层可导航小世界网络算法 HNSW(Hierarchical Navigable Small World)
HNSW(Hierarchical Navigable Small World)分层可导航小世界网络算法 是一种高效的近似最近邻搜索(Approximate Nearest Neighbor Search, ANN) 算法,特别适用于大规模、高维数据集的相似性检索。HNSW 基于小世界网络&…...

ubuntu图形界面右上角网络图标找回解决办法
问题现象: ubuntu图形界面右上角网络图标消失了,不方便联网: 正常应该是下图: 网络寻找解决方案,问题未解决,对于某些场景可能有用,引用过来: 参考方案 Ubuntu虚拟机没有网络图标或…...
maven安装本地jar包到本地仓库
有时候我们需要把本地的 jar 包 install 到本地的 maven 仓库,这时就需要手动install依赖项。例如,把下面的 zhdx-license-1.0.jar 安装到本地 maven 仓库的操作如下: <dependency><groupId>com.zhdx</groupId><artifa…...

1panel申请https/ssl证书自动续期
参考教程 https://hin.cool/posts/sslfor1panel.html #Acme 账户 #1panel.腾讯云dns账号 这里有一步不需要参考,腾讯云dns账号,就是子帐号授权 直接控制台搜索 访问管理 创建用户 授权搜索dns,选择第一个 点击用户名,去掉AdministratorAccess权限 5.点击api密钥生成即可…...

【C语言】指针篇 | 万字笔记
写在前面 在学习C语言过程,总有一个要点难点离不开,那就是大名鼎鼎的C语言指针,也是应为有指针的存在,使得C语言一直长盛不衰。因此不才把指针所学的所有功力都转换成这个笔记。希望对您有帮助🥰🥰 学习指…...
使用transformers调用owlv2实现开放目标检测
目录 安装Demo 安装 pip install transformersDemo from PIL import Image, ImageDraw, ImageFont import numpy as np import torch from transformers import AutoProcessor, Owlv2ForObjectDetection from transformers.utils.constants import OPENAI_CLIP_MEAN, OPENAI_…...

大数据技术:Hadoop、Spark与Flink的框架演进
大数据技术,特别是Hadoop、Spark与Flink的框架演进,是过去二十年中信息技术领域最引人注目的发展之一。这些技术不仅改变了数据处理的方式,而且还推动了对数据驱动决策和智能化的需求。在大数据处理领域,选择合适的大数据平台是确…...
Spring Boot框架下的新闻推荐技术
1系统概述 1.1 研究背景 如今互联网高速发展,网络遍布全球,通过互联网发布的消息能快而方便的传播到世界每个角落,并且互联网上能传播的信息也很广,比如文字、图片、声音、视频等。从而,这种种好处使得互联网成了信息传…...

相亲交友系统的社会影响:家庭结构的变化
随着互联网技术的发展,相亲交友系统已成为许多单身人士寻找伴侣的重要途径。这些平台不仅改变了人们的社交方式,还对家庭结构产生了深远的影响。本文将探讨相亲交友系统如何促使家庭结构发生变化,开发h17711347205并通过简单的Python代码示例…...
C++ 内存池(Memory Pool)详解
1. 基本概念 内存池是一种内存管理技术,旨在提高内存分配的效率。它通过预先分配一块大的内存区域(池),然后从中分配小块内存来满足应用程序的需求。这样可以减少频繁的内存分配和释放带来的性能开销。 2. 设计思路 内存池的设…...
css三角形:css画箭头向下的三角形
.arrow { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 8px 5px 0 5px; /* 上、左、下、右 */ bord…...
CSS属性 - animation
一、基本概念 animation是 CSS 中的一个属性,用于将通过keyframes规则定义的动画应用到元素上。它是一种简写属性,能够在一个声明中设置多个动画相关的子属性。 二、语法结构 基本语法为: animation: name duration timing - function de…...
昇思MindSpore进阶教程--在ResNet-50网络上应用二阶优化实践(下)
大家好,我是刘明,明志科技创始人,华为昇思MindSpore布道师。 技术上主攻前端开发、鸿蒙开发和AI算法研究。 努力为大家带来持续的技术分享,如果你也喜欢我的文章,就点个关注吧 文章上半部分请查看 在ResNet-50网络上应…...

基于大数据的Python+Django电影票房数据可视化分析系统设计与实现
目录 1 引言 2 系统需求分析 3 技术选型 4 系统架构设计 5 关键技术实现 6 系统实现 7 总结与展望 1 引言 随着数字媒体技术的发展,电影产业已经成为全球经济文化不可或缺的一部分。电影不仅是艺术表达的形式,更是大众娱乐的重要来源。在这个背景…...
实景三维技术对光伏产业的发展具有哪些优势?
实景三维技术对光伏产业的发展具有显著的优势,主要体现在提高选址准确性、优化用地规划、促进数据融合应用以及赋能文旅服务领域。 提高选址准确性:通过构建高精度的三维地形模型,结合卫星遥感、无人机测绘等技术手段,实景三维…...

四非人的保研之路,2024(2025届)四非计算机的保研经验分享(西南交通、苏大nlp、西电、北邮、山软、山计、电科、厦大等)
文章目录 一、个人背景二、夏令营北京邮电大学CS西南交通大学CS深圳大学CS苏州大学NLP南开大学CS 三、预推免北京邮电大学CS华东师范大学 CS和大数据电子科技大学 CS东北大学 CS厦门大学 信息学院山东大学 CS和SE西安电子科技大学 CS 四、个人经验五、上岸 一、个人背景 学校专…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中,iftop是网络管理的得力助手,能实时监控网络流量、连接情况等,帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
R语言AI模型部署方案:精准离线运行详解
R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

visual studio 2022更改主题为深色
visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中,选择 环境 -> 常规 ,将其中的颜色主题改成深色 点击确定,更改完成...

Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候,写过一篇简单实现,后期随着对该模型的深入研究,本次记录涉及到prophet 的公式以及参数调优,从公式可以更直观…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口(适配服务端返回 Token) export const login async (code, avatar) > {const res await http…...
Spring AI 入门:Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天,Spring AI 作为 Spring 生态系统的新生力量,正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务(如 OpenAI、Anthropic)的无缝对接&…...
是否存在路径(FIFOBB算法)
题目描述 一个具有 n 个顶点e条边的无向图,该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序,确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数,分别表示n 和 e 的值(1…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件,这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下,实现高效测试与快速迭代?这一命题正考验着…...
现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?
现有的 Redis 分布式锁库(如 Redisson)相比于开发者自己基于 Redis 命令(如 SETNX, EXPIRE, DEL)手动实现分布式锁,提供了巨大的便利性和健壮性。主要体现在以下几个方面: 原子性保证 (Atomicity)ÿ…...
MySQL 主从同步异常处理
阅读原文:https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主,遇到的这个错误: Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一,通常表示ÿ…...