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 四、个人经验五、上岸 一、个人背景 学校专…...

CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...

VB.net复制Ntag213卡写入UID
本示例使用的发卡器:https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)
文章目录 1.什么是Redis?2.为什么要使用redis作为mysql的缓存?3.什么是缓存雪崩、缓存穿透、缓存击穿?3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
线程同步:确保多线程程序的安全与高效!
全文目录: 开篇语前序前言第一部分:线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分:synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1):从基础到实战的深度解析-CSDN博客,但实际面试中,企业更关注候选人对复杂场景的应对能力(如多设备并发扫描、低功耗与高发现率的平衡)和前沿技术的…...
第25节 Node.js 断言测试
Node.js的assert模块主要用于编写程序的单元测试时使用,通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试,通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”,物流的终极形态正在诞生 想象这样的场景: 凌晨3点,某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径;AI视觉系统在0.1秒内扫描包裹信息;数字孪生平台正模拟次日峰值流量压力…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍: img 属性指定分区存放的 image 名称,指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件,则以 proj_name:binary_name 格式指定文件名, proj_name 为工程 名&…...
LangChain 中的文档加载器(Loader)与文本切分器(Splitter)详解《二》
🧠 LangChain 中 TextSplitter 的使用详解:从基础到进阶(附代码) 一、前言 在处理大规模文本数据时,特别是在构建知识库或进行大模型训练与推理时,文本切分(Text Splitting) 是一个…...