硅谷甄选-tabbar的静态

最新推荐文章于 2024-10-09 16:14:46 发布
最新推荐文章于 2024-10-09 16:14:46 发布
阅读量174 收藏 2
点赞数 3
分类专栏： 智元科技 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41748874/article/details/142771768
版权

文章目录


到这一步，菜单的部分，基本差不多了；

现在要做的是tabbar的部分。

首先肯定是先把静态画出来；

静态的样子

画静态的步骤

静态就是html和css；

肯定就是先结构后样式，这样的做法；

  • 第一查看结构，左边是面包屑；右边是按钮和下拉框；
    • 这个部分要多用element ui当中的组件；
  • 第二调整样式，样式最重要的就是布局，所以要熟悉flex布局；

  • html关键是组件；
  • css关键是flex布局；

最终搭建出来效果

备忘

codelyq
关注
专栏目录
uni-app-tabbar:uni-app底部初步实现（不支持小程序）
03-19
- 文件结构：从"uni-app-tabbar-master"这个文件名来看，这是一个包含了源码的项目模板。开发者可以下载这个压缩包，解压后查看源代码，以了解具体的实现细节。 通过以上步骤，开发者可以在uni-app中创建一个功能...
weapp-custom-tabbar:小程序 - 动态设置tabbar
05-24
weapp-custom-tabbar 小程序 - 自定义tabBar组件，可动态设置、更新，无闪烁 custom-tab-bar 实现步骤 1、custom-tab-bar导入项目根目录 2、app.json中设置"custom": true 3、在tabPage的onShow方法中调用更新方法
硅谷甄选4（项目主体）
qq_47296476的博客
07-12 877
修改使用规则rules使用自己编写的函数作为规则校验。//定义表单校验需要的配置对象//规则对象属性:/* {required: true, // required,代表这个字段务必要校验的min: 5, //min:文本长度至少多少位max: 10, // max:文本长度最多多少位message: '长度应为6-10位', // message:错误的提示信息。
尚硅谷甄选--（暂时不更新，实习，后期有时间更）
weixin_42382758的博客
06-07 5006
今天来带大家从0开始搭建一个vue3版本的后台管理系统。一个项目要有统一的规范，需要使用eslint+stylelint+prettier来对我们的代码质量做检测和修复，需要使用husky来做commit拦截，需要使用commitlint来统一提交规范，需要使用preinstall来统一包管理工具。下面我们就用这一套规范来初始化我们的项目，集成一个规范的模版。
二、B站尚硅谷VUE项目硅谷甄选2
weixin_41546828的博客
04-20 760
硅谷甄选前端平台搭建
硅谷甄选三（layout）
m0_56769104的博客
07-05 812
scss全局变量//左侧菜单宽度//左侧菜单背景颜色//顶部导航的高度滚动条//滚动条外观设置//小仓库：layout组件相关配置仓库return {fold: false, //用户控制菜单折叠还是收起的控制refsh: false//刷新},})
【Vue3+TS项目】硅谷甄选day04--顶部组件搭建+面包屑+路由鉴权
m0_55644132的博客
05-31 1937
左侧菜单刷新折叠的问题解决---属性default-active折叠之后图标不见：icon放在插槽外面----element的menu属性：collapse顶部tabbar静态组件封装：拆分为左侧面包屑、右侧设置区域面包屑组件：project\src\layout\tabbar\breadcrumb\index.vue右侧设置组件：project\src\layout\tabbar\setting\index.vue菜单折叠的实现。
【Vue3+Ts项目】硅谷甄选 — 路由配置+登录模块+layout组件+路由鉴权
m0_67992720的博客
12-08 2597
定义小仓库数据state类型：src\store\modules\types\type.ts// 定义小仓库数据state类型登录接口返回的数据类型：src\api\user\type.ts登录请求可能返回成功/失败的数据，因此类型需要dataType需要包括成功的数据token和失败的数据message，且是可选的，要加上"?token?:string// 登录接口返回的数据类型封装本地存储数据和读取方法：src/utils/token.js// 存储数据。
硅谷甄选笔记(9-2开始学习中)
@追求卓越
09-03 950
1.在template直接使用width,在setup使用是pro.wid;2.两种方式都可以.这对页面性能来说是个很大的提升，而且我们SVG文件比img要小的很多，放在项目中几乎不占用资源。安装SVG依赖插件测试SVG图标使用svg:图标外层容器节点, 内部需要与use标签结合使用在vite.config.ts中配置插件。
硅谷甄选_菜单折叠效果
最新发布
浪漫韫秋
10-09 145
上次已经写好了tabbar的静态。后面就按照长期主义的原则，一点一点做效果。我喜欢长期主义永远前进；
前端项目硅谷甄选 视频教程 下载
2401_84572204的博客
07-01 526
008_vue3组件通信方式之provide与inject.mp4。007_vue3组件通信方式之ref与$parent.mp4。009_vue3组件通信方式之pinia选择式API.mp4。010_vue3组件通信方式之pinia组合式API.mp4。006_vue3组件通信方式之useAttrs方法.mp4。004_vue3组件通信方式之全局事件总线.mp4。002_vue3组件通信方式之props.mp4。003_vue3组件通信方式之自定义事件.mp4。
微信小程序--TabBar不出现
03-29
今天打算开始实战一个微信小程序项目，一开始就踩坑了，正确设置了TabBar，但是TabBar就是不能显示出来，后面才找到原因，这里记录下： app.json正确代码： { "pages":[ "pages/index/index", "pages/leader/...
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 509
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
vue-live2d看板娘集成方案设计使用教程
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
10-05 1305
vue-live2d看板娘集成方案设计使用教程
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞
2301_77012231的博客
10-01 651
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞，攻击者可以获取服务器权限。bp 报错泄露绝对路径。sqlmap确认有漏洞。
Webpack 打包后文件过大，如何优化？
官方推荐
09-30 6110
Webpack 打包后文件过大，如何优化？
VUE2常见问题以及解决方案汇总（不断更新中）
tangdou369098655的博客
10-06 388
解决vue项目中 el-table 的 @row-click 事件与行内点击事件冲突，点击事件不生效（表格行点击事件和行内元素点击事件冲突）需要阻止事件冒泡，vue子组件传递数据给父组件，vue + elementui 使用dialog弹出框作为子组件，首次点击弹框可以显示，第二次点击弹框后赋值无法打开弹框，动态循环生成el-checkbox后数据更新但是页面不更新，无法取消勾选，点击无效问题
解决IE中a标签中的图片有边框
weixin_41674235的博客
10-08 126
‌1、通过CSS去除边框‌：在CSS中为img标签添加border:0 none;样式，例如：img{border:0 none;这种方法适用于大多数现代浏览器‌12。3‌、通过JavaScript去除点击后的虚线框‌：在a标签中添加outline:none;和text-decoration:none;这可以同时去除点击后的虚线框和下划线‌。
<template> <div> <router-view /> <van-tabbar v-model="active"> <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item> <van-tabbar-item icon="shopping-cart-o" to="/shopcar" >购物车</van-tabbar-item > <van-tabbar-item icon="friends-o">我的</van-tabbar-item> </van-tabbar> </div> </template> <script> export default { data() { return { active: 0, }; }, methods: {}, watch: { // active() { // if (this.active == 0) { // this.$router.push("/home"); // } else if (this.active == 1) { // this.$router.push("/shopcar"); // } // }, }, }; </script> <style scoped> .van-tabbar-item--active { color: red; } </style>为什么跳转到购物车不会高亮显示呢
06-02
在代码中，购物车页面对应的 `van-tabbar-item` 组件并没有设置 `to` 属性，而是直接作为静态内容呈现在了 `van-tabbar` 中。因此，当路由切换到购物车页面时，虽然 URL 已经匹配到了 `/shopcar`，但是 `van-tabbar-item` 组件并没有被激活，因此也就无法显示高亮样式。 要解决这个问题，可以将购物车页面对应的 `van-tabbar-item` 组件的 `to` 属性设置为 `/shopcar`，这样在路由切换到购物车页面时，对应的 `van-tabbar-item` 组件就会被激活，并显示高亮样式。修改后的代码如下所示： ```html <van-tabbar-item icon="shopping-cart-o" to="/shopcar">购物车</van-tabbar-item> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值