Vue - tabbar(底部导航栏)
2024-07-06 19:26:53
文章目录
- 一、TabBar实现思路
- 二、assets文件夹
- 2.1 在App.vue里面动态引用css文件
- 三、基本搭建
- 四、TabBar和TabBarItem组件封装
- 4.1 TabBar组件封装
- 4.2 TabBarItem组件封装
- 五、使用具名插槽完成img和文字的封装
- 5.1 在App.vue往TabBarItem插槽里面放图片和文字
- 六、修改底部样式
一、TabBar实现思路
- 定义一个TabBar组件
- TabBar中显示的内容由外界决定
- 定义插槽
二、assets文件夹
assets文件夹里面存放的是一些css文件和img文件
在
assets文件夹里面创建一个base.css, 配置取消网页默认的padding和margin值,
2.1 在App.vue里面动态引用css文件
<style>@import "./assets/css/base.css";@import "./assets/css/tab_bar.css";
</style>
三、基本搭建
App.vue
<template><div id="app"><div id="tab-bar"><div class="tab-bar-item">首页</div><div class="tab-bar-item">分类</div><div class="tab-bar-item">购物车</div><div class="tab-bar-item">我的</div></div></div>
</template><script>
export default {name: 'App',
}
</script><style>@import "./assets/css/base.css";@import "./assets/css/tab_bar.css";
</style>
tab_bar.css
#tab-bar {display: flex;background-color: #f6f6f6;position: fixed;left: 0;right: 0;bottom: 0;box-shadow: 0 -1px 1px rgba(100, 100, 100, 0.08);
}
.tab-bar-item {flex: 1;text-align: center;height: 49px;line-height: 49px;
}
四、TabBar和TabBarItem组件封装
4.1 TabBar组件封装
把
tabbar的样式和功能提取到TabBar组件里面
<template><div id="tab-bar"><div class="tab-bar-item">首页</div><div class="tab-bar-item">分类</div><div class="tab-bar-item">购物车</div><div class="tab-bar-item">我的</div></div>
</template><script>
export default {name: 'TabBar'
}
</script><style>#tab-bar {display: flex;background-color: #f6f6f6;position: fixed;left: 0;right: 0;bottom: 0;box-shadow: 0 -1px 1px rgba(100, 100, 100, 0.08);}.tab-bar-item {flex: 1;text-align: center;height: 49px;line-height: 49px;}
</style>
在App.vue里面注册并使用tabbar组件
<template><div id="app"><tab-bar></tab-bar></div>
</template><script>import TabBar from './components/tabbar/TabBar'export default {name: 'App',// 注册组件components: {TabBar}}
</script><style>@import "./assets/css/base.css";
</style>在TabBar组件里面放置一个插槽, 用来放TabBarItem的东西
4.2 TabBarItem组件封装
把
TabBarItem抽取为一个组件, 然后放到插槽里面.
TabBarItem.vue
<template><div id="tab-bar-item"><div class="tab-bar-item"><img src="../../assets/img/tabbar/home.svg">首页</div><div class="tab-bar-item"><img src="../../assets/img/tabbar/category.svg">分类</div><div class="tab-bar-item"><img src="../../assets/img/tabbar/shopcart.svg">购物车</div><div class="tab-bar-item"><img src="../../assets/img/tabbar/profile.svg">我的</div></div>
</template><script>export default {name: 'TabBarItem'}
</script><style>.tab-bar-item {flex: 1;text-align: center;height: 49px;line-height: 49px;}.tab-bar-item img {height: 24px;width: 24px;}
</style>
五、使用具名插槽完成img和文字的封装
TabBarItem.vue
<template><div class="tab-bar-item"><!-- 存放图片 --><slot name="item-icon"></slot><!-- 存放文字 --><slot name="item-text"></slot></div>
</template><script>export default {name: 'TabBarItem'}
</script><style>.tab-bar-item {flex: 1;text-align: center;height: 49px;font-size: 14px;}.tab-bar-item img {height: 24px;width: 24px;}
</style>
5.1 在App.vue往TabBarItem插槽里面放图片和文字
<template><div id="app"><tab-bar><tab-bar-item><img slot="item-icon" src="./assets/img/tabbar/home.svg"><div slot="item-text">首页</div></tab-bar-item><tab-bar-item><img slot="item-icon" src="./assets/img/tabbar/shopcart.svg"><div slot="item-text">购物车</div></tab-bar-item><tab-bar-item><img slot="item-icon" src="./assets/img/tabbar/category.svg"><div slot="item-text">分类</div></tab-bar-item><tab-bar-item><img slot="item-icon" src="./assets/img/tabbar/profile.svg"><div slot="item-text">我的</div></tab-bar-item></tab-bar></div>
</template><script>import TabBar from './components/tabbar/TabBar'import TabBarItem from './components/tabbar/TabBarItem'export default {name: 'App',// 注册组件components: {TabBar,TabBarItem}}
</script><style>@import "./assets/css/base.css";
</style>六、修改底部样式
TabBarItem.vue
<template><div class="tab-bar-item"><!-- 存放图片 --><!-- 定义一个变量, 用来记录是否显示 --><slot v-if="isActive" name="item-icon"></slot><!-- 存放点击后改变样式的图片 --><slot v-else name="item-icon-active"></slot><!-- 存放文字 --><!-- 因为替换插槽会直接把slot直接替换, 所以在slot里面定义class也会被替换, 所以定义一个div用来定义class --><div :class="{active: !isActive}"><slot name="item-text"></slot></div></div>
</template><script>export default {name: 'TabBarItem',data() {return {isActive: true}},}
</script><style>.tab-bar-item {flex: 1;text-align: center;height: 49px;font-size: 14px;}.tab-bar-item img {height: 24px;width: 24px;}.active {color: red;}
</style>
Vue - tabbar(底部导航栏)相关推荐
- flutter TabBar 底部导航栏
更多文章请查看 lutter从入门 到精通 实现底部导航栏并点击切换页面可简述为有三种方式 TabBar + TabBarView BottomNavigationBar + BottomNaviga ...
- uView（Tabbar 底部导航栏）
(一)第一种方式 1,每个菜单页面都要 "首页" "发布" "我的" 每个页面都要 <template><view> ...
- Vue实现底部导航栏切换页面及图片
前言 刚进新公司,有幸接触到从前后端不分离到前后端分离的一个过程,最开始对vue不太熟悉,下班自学一周就开始做了,可能会有很多问题,若有写不好的地方大佬们可以提出. 一.实现效果 需求:vue底部导航 ...
- 小程序 底部导航栏(tabBar)图标的正确做法
许多人都认为小程序系统的底部导航栏特别不好看,为了美观而选择自定义,从此身陷漩涡无法自拔.其实真正的原因是图标的图片处理不当(说白了就是前端和设计太菜了),导致会有线条变粗,间距不当的视觉感受. 除小 ...
- vue.js项目实战运用篇之抖音视频APP-第三节：底部导航栏组件功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- Tabbar：底部导航栏
定义footbar子组件 需要注意的是:useRouter()用来记录当前的路由名称,以便van-tabbar组件显示对应的高亮状态 <template><div class=&qu ...
- 2_flutter_TextField(文本框),TabBar(选项卡),bottomNavigationBar(底部导航栏)
1_TextField(文本框) import 'package:flutter/material.dart';void main() {runApp(MaterialApp(home: MyEdit ...
- vue底部跳转_详解Vue底部导航栏组件
不多说直接上代码 BottomNav.vue: {{item.name}} export default{ props:['idx'], data(){ return { items:[{ cls:& ...
- vue手机端底部导航栏
业务逻辑: 项目多个页面需用到底部导航栏,所以抽离出来,以组件的方式引入父组件. 方法一 更新(2019年5月6日),关于底部导航栏的应用,还可以利用子组件和父组件的关系来绑定. 首先增加一个父组件文 ...
最新文章
- python基础：python扩展包的安装方式
- VS2010解决方案不显示无法添加项目问题
- 使用LogKit进行日志操作
- 【网址收藏】dubbo特新概念及特性、环境搭建、dubbo-monitor安装、rpc原理以及dubbo原理：框架设计、启动解析加载配置信息、服务暴露、服务引用及调用
- python程序占用内存高_如何优化Python占用的内存，面试必学
- linux seq_file 接口
- 【朝夕技术专刊】WebApi部署多服务器配置Nginx负载均衡
- JSON为什么那样红(另有洞天)
- 使用JDBC来连接数据库
- apriori算法代码_资源 | 《机器学习实战》及代码（基于Python3）
- 宿舍管理系统c语言程序代码,宿舍管理系统(c语言版)
- meterpreter 监控桌面命令(screenshare)
- 用python简易制作晋江城小说下载器（GUI+爬虫+多线程）
- 竞价推广常见难题及优化调整思路
- PostgreSQL 技术内幕(二) Greenplum-AO表
- 混沌初开：全新 HarmonyOS 2 正式到来！
- Python爬虫练习：爬取猫眼电影实时票房
- 2022年建筑设计中效果图渲染常见的7个错误
- 电影解说都是怎么配音的？电影解说配音实战教程
- Webots+ROS学习记录（4）——六轮全地形移动机器人