49.vue实例（一）：tabbar

已于 2022-03-09 18:14:29 修改
阅读量251 收藏 1
点赞数
分类专栏： 从头开始学编程 文章标签： vue
于 2020-12-10 17:13:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40594696/article/details/110921318
版权
本文档详细介绍了使用Vue构建一个具备路由跳转和激活状态切换功能的TabBar组件的过程。从创建项目开始，逐步实现每个按钮的显示、点击事件处理、页面内容的动态更新以及代码的优化。同时，提到了通过阿里矢量图标库获取所需图标，以及如何设置Webpack的路径别名来简化引用。
摘要由CSDN通过智能技术生成

目录

git：https://gitee.com/cxy-xupeng/vue-tab-bar.git

一、创建项目

二、初步做出下面的按钮

三、点击按钮，路由跳转

四、点击，切换活跃状态

五、精简APP.Vue代码

六、文件路径的引用

七、完整代码

git：vueTabBar: vue小练手

一、创建项目

然后我们打开项目，删除HelloWorld.vue以及App.vue里面的一部分，删除后如下：

删好之后，输入

npm run dev

进入网页，这个时候页面上啥都没有，准备工作完成

了解本专栏 订阅专栏 解锁全文 超级会员免费看
鹏哥哥啊Aaaa
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
【Vue学习笔记_16】案例-Tabbar导航栏
weixin_44752429的博客
11-28 355
【Vue学习笔记_16】案例-Tabbar导航栏项目文件结构效果展示&组件结构封装TabBarTabBarItem.vueTabBar.vue使用封装的TabBarMainTabBar.vueApp.vue配置路由router/index.js文件目录配置别名 这个案例结合了前面介绍的slot插槽、vue-router前端路由等知识点，最重要的是体现了组件封装的思想。 配套可执行代码示例 => GitHub 项目文件结构 assets/：静态资源，css、img等 components/：公
vue——tabbar案例
weixin_45998300的博客
03-28 1568
1.项目初始化 组件拆分: MyHeader.vue – 复用之前的 MyTabBar.vue – 底部导航 MyTable.vue – 封装表格 三个页面: - MyGoodsList.vue – 商品页 - MyGoodsSearch.vue – 搜索页 - MyUserInfo.vue – 用户信息页 ①: vue create tabbar-demo ②: yarn add less less-loader@5.0.0 -D ③: yarn .
tabbar实现
caoyuan258的博客
12-07 239
tabbar，element-ui实现底部 <template> <div> <router-view></router-view> <div class="footer"> <van-tabbar route v-model="active" > <van-tabbar-item icon="home-o" to='/first'>首页</van-tabbar-item
vue单页面实现tabBar
weixin_43927397的博客
02-17 480
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>底部导航</title> <meta name="keywords" content="关键字" /> &
vue学习(六)项目基础(1)-TabBar
wuyxinu的博客
11-27 353
TabBar实现思路 实现代码 TabBar.vue <template> <div class="tab-bar"> <slot></slot> </div> </template> <script> export default { name: 'TabBar',...
vue 使用 ly-tab 报错
m0_65450343的博客
07-12 820
页面控制台报错，意思为 ：组件未注册解决方法 卸载 组件 重新安装低版本第一步 npm uninstall ly-tab 如果这样卸载报错 可以删了 node_modules文件夹 删了pakege.json中的 ly-tab 依赖信息 重新 npm i 安装依赖 然后执行下面这步第二步 npm install ly-tab@2.1.1...
vue组件tabbar使用方法详解
10-17
随后，在项目中引入所需的Tabbar和TabbarItem组件，并在Vue实例中注册这些组件： ```javascript import { Tabbar, TabbarItem } from 'vux'; export default { components: { Tabbar, TabbarItem } }; ``` ...
vue自定义底部导航栏Tabbar的实现代码
10-18
`Tabbar.vue` 是整个底部导航栏组件，它包含一个 `v-for` 循环，遍历 `tabbarDes` 数组来创建多个 `Item` 组件。`tabbarDes` 包含每个选项的文本、页面名称、正常图标和选中图标。`selected` 数据属性存储当前选中的...
vue mint-ui tabbar变组件使用
08-27
// tabbar.vue <mt-tabbar v-model="message" fixed> <img slot="icon" :src="this.atabs[0]"> 主页 <img slot="icon" v-bind:src="this.atabs[1]"> 积分商城 <img slot="icon" v-bind:src="this....
tabbar.zip
02-14
// 父组件的Vue实例 data() { return { tabs: [ { icon: 'tab1Icon', title: 'Tab 1' }, { icon: 'tab2Icon', title: 'Tab 2' }, // 更多Tab... ] } }, computed: { dynamicSlots() { return this.tabs.map...
vue-vite.zip
09-22
3. 编写TabBar组件：在components目录下创建TabBar.vue文件，定义TabBar组件的HTML结构、样式和逻辑。组件可能会有动态绑定的active属性来表示当前选中的标签页，以及点击事件来切换页面。 4. 配置Vue Router：在...
Web前端开发技术:Vue路由
Nick的博客
01-16 3059
了解Vue路由相关知识和相关插件、loader的安装与使用 请使用Vue路由相关知识手动实现Tab栏切换案例，要求如下。 ①创建一个components/Message.vue组件，用来展示页面内容。 ②创建3个子路由，分别是“待付款”、“待发货”、“待收货”页面，在每个子路由页面单独写出相应的内容，页面效果如图所示。
自定义vue底部导航栏组件tabbar
weixin_45663697的博客
09-06 3643
TabBar 自定义vue底部导航栏组件tabbar，效果如下所示： 1. 基本结构搭建 根据组件封装的思想，我们事先创建几个文件夹，用来存放对应部分的代码。文件结果如下图所示： 从效果图来看底部可以分为两个部分：最外层框架区和内层图标区 组件就是需要的时候可以直接引用并且方便更改，那么我们就可以将tabbar导航栏组件划分为两个小的组件：TabBar.vue、TabBarItem.vue TabBar.vue设置导航栏组件的外观形状 TabBarItem.vue负责设置内置图标汉字的样
vue2.0小案例——实现移动端tabbar布局
qq_56607109的博客
09-01 525
【代码】vue2.0小案例——实现移动端tabbar布局。
前端Vue父组件挂载子组件弹窗,父组件按钮点击无法开子组件弹窗解决方案
m0_49714202的博客
11-08 2190
前端Vue父组件挂载子组件弹窗,父组件按钮点击无法开子组件弹窗解决方案
vue项目中点击tab选项卡切换案例(带源码)
m0_49714202的博客
04-12 1912
目录源码效果如下图 其他写法 1.tab选项卡切换案例 2.tab切换多个单页面跳转 3.两个单页面v-if 源码 <template> <div class="box"> <div class="nav"> <div :class="{active:itemIndex == 1}" @click="get1(1)">标题1</div> <div :class="{active:itemInde
vue的学习笔记（14）之Tabbar案例
肿肿的博客
02-03 905
Tabbar案例1、TabBar实现思路2、tabbar-实现流程 1、TabBar实现思路 （1）如果在下方有一个单独的TabBar组件，如何封装？ 自定义TabBar组件，在APP中使用 让TabBar出于底部，并且设置相关的样式 （2）TabBar中显示的内容由外界决定 定义插槽 flex布局平分TabBar （3） 自定义TabBarItem，可以传入 图片和文字 定义TabBarItem，并且定义两个插槽：图片、文字。 给两个插槽外层包装div，用于设置样式。 填充插槽，实现底部TabB
Tab bar item的image 设置后，图片显示怪异
brook0344的专栏
12-25 4559
必须把图片设置成30X30才能正常显示，而且只有ALPHA通道被使用，其它的颜色值是没用的。 如果图片尺寸怪异，比如57X57护着37X334的话，显示的形状都很怪
vue 使用遇到的坑
qq_37672347的博客
09-11 1358
1，没有正确注册组件 问题描述： vue.runtime.esm.js:619 [Vue warn]: Unknown custom element: <tags-view> - did you register the component correctly? For recursive components, make sure to provide the "name" ...
在vue 中，如何跳转到tabBar 页面，给个例子
最新发布
08-17
首先，在main.js文件中引入Vue和Vue Router，并创建Vue实例和路由实例： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' import TabBarPage from './...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鹏哥哥啊Aaaa

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值