uniapp 导航分类

  1. 商品分类数据,包括分类名称和对应的商品列表
  2. 点击弹出 列表的内容
展示效果如下:

       

代码展示
①div部分
	<view class="container"><view class="menu-bar"><view class="menu"><view class="menu-scroll"><view v-for="(m, i) in menus" :key="m":class="['menu-item', i === activeIndex && 'active']" @click="activeIndex = i">{{ m }}</view></view><view :class="['unfold', visible && 'up']" @click="visible = !visible"style="background-color: #F5F9FF;margin-top: 6rpx;"><u-icon name="arrow-down" size="15" style=""></u-icon></view></view><view v-if="visible" :class="['all-menu', visible && 'active']"><view class="menu-item h3">全部分类</view><view v-for="(m, i) in menus" :key="m" :class="['menu-item', i === activeIndex && 'active']"@click="activeIndex = i">{{ m }}</view></view></view><view v-if="visible" class="modal" @click="visible = false" /></view>
②js部分
	menus: ["首页", "手机", "爱车", "百货", "男装", "饰品", "美妆", "电脑", "钟表眼镜"],activeIndex: 0,visible: false,
③css部分
::-webkit-scrollbar {display: none;}.container {position: relative;z-index: 100;width: 375px;// height: 812px;background-color: #f1f1f1;}.menu-bar {position: relative;z-index: 10;}.menu {display: flex;width: 100%;height: 100%;padding: 16px 12px 12px 10px;background-color: #F5F9FF;box-sizing: border-box;}.menu .menu-scroll {display: flex;width: 100%;overflow-x: scroll;}.menu-item {padding: 0 7px;flex-shrink: 0;font-size: 14px;}.menu-item.active {color: #478CF6;font-weight: 700;}.all-menu {display: grid;grid-template-columns: repeat(5, 1fr);gap: 6px 4px;padding: 16px 8px 20px 24px;background-color: #fff;border-radius: 0 0 16px 16px;transition: all 0.3s;}.all-menu.active {padding: 16px 8px 20px;height: auto;}.all-menu .menu-item {background-color: #f5f5f5;font-size: 12px;display: flex;align-items: center;justify-content: center;padding: 8px;border-radius: 20px;box-sizing: border-box;border: 1px solid #f5f5f5;}.all-menu .menu-item.h3 {background: none;border-color: #fff;}.all-menu .menu-item.active {background-color: #fff;border-color: #478CF6;}.modal {position: absolute;top: 0;left: 0;// background-color: rgba(0, 0, 0, 0.3);width: 100%;height: 100%;}

以上为所有,即可粘贴进行测试。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/180558.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【hive-design】hive架构详解:描述了hive架构,hive主要组件的作用、hsql在hive执行过程中的底层细节、hive各组件作用

文章目录 一. Hive Architecture二. Metastore1. Metastore Architecture2. Metastore Interface 三. Compiler四. hive架构小结 本文主要讨论了 描述了hive架构&#xff0c;hive主要组件的作用详细描述了hsql在hive执行过程中的底层细节描述了hive各组件作用 一. Hive Archite…

Kubernetes入门篇

文章目录 &#x1f50a;博主介绍&#x1f964;本文内容Kubernetes是什么&#xff1f;为什么需要 Kubernetes&#xff0c;它能做什么&#xff1f;Kubernetes 版本进化Kubernetes 概念Kubernetes 中 3 个重要概念 &#x1f4e2;文章总结&#x1f4e5;博主目标 &#x1f50a;博主介…

第四阶|自在行草 暄桐教室,林曦书法 从书法之美到生活之美

我这有很多的课程&#xff0c;需要了可以取用 新一期&#xff08;入门课&#xff09;&#xff0c;目前已经更新完毕。 新一期&#xff08;第一阶&#xff09;&#xff0c;目前已经更新完毕。 新一期&#xff08;第二阶&#xff09;&#xff0c;目前已经更新完毕。 新一期&#…

验证回文串(双指针)

LCR 018. 验证回文串 - 力扣&#xff08;LeetCode&#xff09; 题目描述 给定一个字符串 s &#xff0c;验证 s 是否是 回文串 &#xff0c;只考虑字母和数字字符&#xff0c;可以忽略字母的大小写。 本题中&#xff0c;将空字符串定义为有效的 回文串 。 样例输入 示例 1…

毫米波雷达DOA角度计算----Capon算法

算法实现如下&#xff1a; parameter&#xff1a;雷达参数设置。 antVet&#xff1a;目标点 对应的非相参积累天线数据。 function [angle,doa_abs] caponMethod(parameter,antVec)txAntenna parameter.txAntenna; % 发射天线 [1 1]rxAntenna parameter.rxAntenna; % 接…

Java第十二篇:连接安全版kafka(Kerberos认证)出现的问题解答

Could not find a ‘KafkaClient’ entry in the JAAS configuration 问题现象 问题原因 原因没有找到&#xff0c;怎么引起的倒是很清楚。原因就是找到不到指定路径下的kafka_client_jaas.conf文件&#xff0c;别看我的路径带了两个//&#xff0c;但没问题的&#xff0c;等同…

PTA:用函数实现从数列中删除一个数

题目&#xff1a; 编写一个函数实现&#xff1a;删除n个元素的数列中下标为k的元素。 测试程序将输入一个下标值&#xff0c;调用本函数&#xff0c;删除数列{1,4,13,9,6,11,18,14,25}中该下标位置的元素&#xff0c;并输出删除后的数列。 函数接口定义&#xff1a; void de…

梦极光(ez_re?)

ez_re 先查壳看看&#xff0c;没有壳 32位 我先说说这道题 打开分析找到主函数 在这里就是flag了&#xff0c;用十六进制转ascii码 我们先运行这个程序看看 我想说说我的想法 首先没看出来这里是十六进制转ascii码其次41D538数组用来干啥来的&#xff1f;题目里面给出的请…

Micropython STM32F4外部中断实验

Micropython STM32F4外部中断实验 &#x1f4cc;固件刷可参考前面一篇《STM32刷Micropython固件参考指南》&#x1f33f; 相关篇《Micropython STM32F4入门点灯》&#x1f4cd;固件下载&#xff1a;https://micropython.org/download/?mcustm32f4&#x1f516;本例程基于STM32…

网络运维与网络安全 学习笔记2023.11.28

网络运维与网络安全 学习笔记 第二十九天 今日目标 OSPF汇总之域间路由、OSPF汇总之外部路由、OSPF链路认证 OSPF安全认证之区域认证、OSPF虚链路 OSPF汇总指域间路由 项目背景 企业内网运行多区域的OSPF网络&#xff0c;在R1 上存在多个不稳定的链路 R1上的不稳定链路&a…

纯cpp如何模拟qt的信号与槽

纯cpp如何模拟qt的信号与槽 我之前是如何使用bind的?一.demo示例二.简单来讲,c自带的bind与function函数,如何实现类似信号与槽的机制1. 简单语法2. function与bind联动尝试1尝试2真正实现流程图 自我反思 我之前是如何使用bind的? 一.demo示例 using MsgHander std::funct…

数据结构-交换排序(冒泡、快速)

冒泡排序 基本思想 先将第一个记录与第二个记录比较&#xff0c;将较大的记录放到第二个位置上&#xff0c;之后再将第二个记录与第三 个记录比较&#xff0c;将较大的记录放到第三个位置上&#xff0c;如此类推&#xff0c;知道比较完最后一个位置&#xff0c;此时注意到 …

红队攻防之hash登录RDP

没什么好害怕&#xff0c;孩子放心去飞吧&#xff0c;在你的身后有个等你的家 Restricted Admin Mode 受限管理模式是一项 Windows 功能&#xff0c;可防止将 RDP 用户的凭据存储在建立 RDP 连接的计算机的内存中。 这是用来防止用户&#xff08;管理员&#xff09;在 RDP 进…

shopee数据:如何获取Shopee平台的数据

在如今快速发展的跨境电商市场中&#xff0c;Shopee&#xff08;虾皮&#xff09;作为一个备受关注的平台&#xff0c;主要服务于东南亚市场。对于卖家来说&#xff0c;了解Shopee平台的数据是非常重要的&#xff0c;因为这可以帮助他们更好地了解市场趋势、优化商品策略并提高…

Ubuntu 20.0 + mysql 8.0 用户和密码修改

第一步 下载&#xff08;简单,注意联网&#xff09;Ubuntu 终端输入以下两行命令 (1) 数据库的服务端及客户端数据库的开发软件包 sudo apt-get install mysql-server mysql-client (2) 数据库的开发软件包 sudo apt-get install libmysqlclient-dev 第二步 查看是否安装成功 …

nginx与vue路由

nginx代理方式 server {listen 80;server_name localhost;location /order/{ proxy_pass http://localhost:8080/order } 表示监听80端口&#xff0c;将请求反向代理到后端服务器。 例如&#xff1a;当浏览器请求的路径是 localhost:80/order/get&#xff0c;检测到请求路径…

微信小程序获取手机号流程以及用到的API

微信小程序获取手机号流程以及用到的API和代码示例如下&#xff1a; 获取手机号流程&#xff1a; 用户点击授权登录按钮&#xff0c;小程序会提示用户授权并获取用户同意。获取到用户的同意后&#xff0c;小程序会将用户的临时登录凭证code返回给开发者服务器。开发者服务器通…

【科技素养】蓝桥杯STEMA 科技素养组模拟练习试卷11

单选题 1、在阅读文章和接受信息时注意区分事实和观点十分重要。事实&#xff08;或称为命题&#xff09;不同于观点的一个主要特征是 A、可以被证实或证伪 B、是准确无误的 C、是正式的表达 D、表达了个人看法 答案&#xff1a;A 2、现代意义的知识产权是在多数国家都受…

血的教训--redis被入侵之漏洞利用复现--总览

血的教训–redis被入侵之漏洞利用复现–总览 相信大家对于自己的服务器被入侵&#xff0c;还是比较憎恨的&#xff0c;我的就被攻击了一次&#xff0c;总结经验&#xff0c;自己也是整理了这一个系列&#xff0c;从最基础到最后面的自己总结被攻破的步骤&#xff0c;非常清晰的…

c++调用openssl对文件加解密

c调用openssl对文件加解密 1.OpenSSL简介2.使用 EVP 库实现 DES 和 AES 加密EVP_EncryptUpdate 函数参数详解EVP 库的AES 算法的cbc模式 3.DEC加密的ecb模式 (没有EVP方式效率高) 1.OpenSSL简介 OpenSSL库是由C语言实现&#xff0c;整个软件包大概可以分成三个主要的功能部分&…