vue53—— TabBar 基本结构搭建

最新推荐文章于 2025-02-13 17:47:03 发布
最新推荐文章于 2025-02-13 17:47:03 发布
阅读量194 收藏
点赞数
分类专栏： vuejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43899694/article/details/103274838
版权
本文详细介绍如何创建并自定义TabBar组件，包括在App中使用TabBar，使其处于底部并设置样式，以及通过定义插槽和使用Flex布局来平分TabBar空间，最后实现TabBarItem的自定义展示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在这里插入图片描述

创建封装上图的TabBar

  1. 自定义TabBar组件，在app中使用
  2. 让TabBar处于底部，并设置相关样式
  3. tabbar中显示内容由外界决定： 定义插槽，flex布局平分tabbar
  4. 自定义TabBarItem，可以传入图片文字—— a. 定义TabBarItem，且定义两个插槽：图片，文字 b. 两个插槽外层包装div，用于设置样式 c.填充插槽，实现底部tabbar效果

在这里插入图片描述

[项目记录]用vue-electron搭建pc网易云音乐程序（2）——搭建基本页面
iufesjgc的博客
05-20 857
项目创建好，可以开始写静态页面了，在动手之前，先粗略观察一下官方的网易云音乐程序样式，看哪些模块是可以重复利用的，以提高开发效率。 像tabbar，模块标题，一些电台、mv模块都是可以复用的。 再就是确保有可以控制全局风格的变量，很多细节的颜色都是可以一键替换的。 粗略观察之后，就可以开始了，首先写顶部和底部组件。 为了实现头部header的自定义，要把electron自带的frame和菜单隐藏掉 在background.js里新建窗口时，添加frame:false参数，在程序启动时，设置
1.Vue3实战——网易云音乐
2401_82986110的博客
05-23 1887
网易云音乐，项目实战，Vue3
tabbar全局结构搭建
~~~的博客
12-11 330
一、搭建思路 1、自定义TabBar组件，位于底部，并设置样式 2、TabBar中显示的内容由外界决定，定义插槽，flex布局平分TabBar 3、自定义TabBarItem组件，设置样式，并定义两个插槽：图片和文字 4、填充插槽，实现底部TabBar效果 5、TabBar-TabBarItem和路由动态结合 TabBarItem颜色动态控制 效果图如下：点击哪个跳转到对应页面 二、代码如下 1、main.js import Vue from 'vue' import App from './App.vu
vue tabbar结构的基本搭建，自定义菜单个数以及菜单选中颜色
小怪獸丶的糖的专栏
06-15 507
一、要实现常见应用tabbar效果，总共四个菜单、分别是首页、分类、购物车和我的，点击哪一个则显示哪一个页面的内容 二、具体实现关键过程如下 在components文件夹中新建tabbar文件夹，分别建立TabBar.vue文件以及TabBarItem.vue文件 TabBar.vue <template> <div id="tab-bar"> <slot></slot> </div> </template> &
TabBar框架的简单搭建
agp49315的博客
07-29 178
新手上路, 下面来总结一下我所学到的简单知识, 也算对自己的一个复习, 希望大家共同进步 1.在StoryBoard中拖一个tab bar controller, 会有系统自带的两个item, 把这两个删除掉 2.拖5个navigation controller, 因为这里我们要创建5个页面, 然后每个导航栏分别拖入一个对应的view controller 3.接下来就是连线了, ...
tabbar的搭建过程
weixin_44776706的博客
05-05 438
============================================================================== 注意事项： 1、assets文件夹储存一些资源，图片、css 2、在style标签里面引用文件要使用 @import“文件路径”； 3、tabbar的高度一般是49px 4、box-shadow：x y 1px模糊程度 rbga（r，b，g，...
前端Vue实现tabbar组件
章鱼仔的博客
01-29 4060
tabbar组件的实现 TabBar.vue组件 tabbar组件只需要在内写一个插槽即可，将来往里面放tabbaritem即可 <template> <div id='tab-bar'> <slot></slot> </div> </template> <script> expor...
黑马头条vue2.0项目实战（三）——个人中心功能的实现
weixin_56370772的博客
07-30 1262
通过分析页面，可以看到，首页、问答、视频、我的 都使用的是同一个底部标签栏，我们没必要在每个页面中都写一个，所以为了通用方便，我们可以使用 Vue Router 的嵌套路由来处理。
vue3搭建实战项目笔记二
xiaoxiannvh的博客
02-13 569
createVue工具默认没有初始化git仓库，vue-cli是默认初始化git本地仓库的。没有的话，手动用git来做一个项目管理。
基于Vue开发的电商APP项目——蘑菇街app
qq_46608252的博客
09-21 2774
基于Vue开发的电商APP项目——蘑菇街项目源码：https://github.com/Limna777/Shopmall.git1、项目描述2、使用的插件或第三方库3、页面主要实现的功能1、首页2、应用分类3、购物车4、个人中心4、基本目录5、项目截图 项目源码：https://github.com/Limna777/Shopmall.git 接口私聊 1、项目描述 项目技术栈Vue2.0 + vuex + vue-router + ES6 + webpack + axios 项目采用模块化、组件化、
【微信小程序】tabBar和window节点常用的配置项
qq_61845982的博客
07-10 1478
本文简单介绍tabBar和window节点常用配置项 taBar 实现多页面的快速切换。小程序分为 ·底部tabBar ·顶部tabBar 注意：tabBar中只能配置最少2个，最多5个tab页签 当渲染顶部tabBar时，不显示icon，只显示文本 2.节点配置 代码如下（示例）： indow节点常用的配置项 ·属性名navigationBarTitleText 类型：string 默认：字符串 说明导航栏标题文字内容 ·navigationBarBac
自定义vue底部导航栏组件tabbar
weixin_45663697的博客
09-06 3795
TabBar 自定义vue底部导航栏组件tabbar，效果如下所示： 1. 基本结构搭建 根据组件封装的思想，我们事先创建几个文件夹，用来存放对应部分的代码。文件结果如下图所示： 从效果图来看底部可以分为两个部分：最外层框架区和内层图标区 组件就是需要的时候可以直接引用并且方便更改，那么我们就可以将tabbar导航栏组件划分为两个小的组件：TabBar.vue、TabBarItem.vue TabBar.vue设置导航栏组件的外观形状 TabBarItem.vue负责设置内置图标汉字的样
微信小程序的项目结构搭建
hongxue8888的博客
02-27 797
ssssssssssssssss
tabBar底部导航栏
luping_的博客
07-12 3018
tabBar "tabBar":{ "color":"#ccc", "backerStyle":"white", "selectedColor":"#555", "backgroundColor": "#ffffff", "list":[ { "pagePath":"pages/shouye/shouye", "iconPath": "images/shouye1.png", "selectedIconPath": "im...
vue3---options
weixin_43899694的博客
10-18 2987
options new Vue(options)的options options有很多属性，目前使用的： el ： 类型： string | HTMLElement ($(’#div’) ) 决定 Vue 示例将会管理那个DOM data： 类型： Object | Function（组件中 data必须是一个函数） Vue实例对应的数据对象 methods 类型：{ [key: st...
vue45 —— vue-router 安装使用，修改路由默认路径，修改hash—>history
weixin_43899694的博客
11-25 1795
三大框架的路由实现 Angular： ngRouter React：ReactRouter Vue：vue-router vue-router vue-router是Vue.js官方的路由插件， 和vue.js是深度集成的， 适合用于构建单页面应用 基于路由和组件 路由用于设定访问路径，将路径和组件映射起来 在vue-router单页面应用中，页面路径的改变 就是 组件的切换 安装和使用 ...
vue52 —— keep-alive 和 router-link 以及 actived，beforeRouteLeave
weixin_43899694的博客
11-27 1413
keep-alive 是Vue里的一个内置组件，可使被包含的组件保留状态，或避免重新渲染 两个属性： include， exclude include： 字符串或正则表达式，匹配的组件才会被缓存 exclude： 字符串或正则表达式，匹配的组件都不会被缓存 eg. 要设置多个时，加逗号，不能有空格 <keep-alive exclude='User,Profile'> &lt...
vue57 —— vuex 核心 & 数据响应式原理
weixin_43899694的博客
11-30 1351
vuex核心 1. state单一状态树 单一状态树： single sourse of truth ，也称单一数据源 2. getters （类似与单个组件中的计算属性computed） more20(state){ return state.stu.filter(s => s.age > 20 ) }, length(state,getters){ ...
vue47—— 动态路由 ( :to='/user/ + userId' ; {{ $route.params.xxx }} )
weixin_43899694的博客
11-26 1058
需求： 跳转到user界面，url为user后面接id -----> …/user/userId —— 动态路由 且要在user.vue中拿到在App.vue中的有关用户的信息 User.vue: <template> <div> <h2>用户组件</h2> <p> 用户信息： 用户id...
移动端vue3项目搭建
最新发布
03-20
### Vue3 移动端项目搭建教程 以下是关于如何搭建一个基于 Vue3 的移动端项目的详细说明： #### 1. 初始化项目环境 通过 Vite 创建一个新的 Vue3 项目可以显著提高开发效率。执行以下命令来创建并初始化项目： ```bash npm init vite@latest my-vue-app --template vue cd my-vue-app npm install ``` 这一步骤会设置好基础的 Vue3 和 Vite 开发环境[^2]。 #### 2. 配置路由 (Vue Router) 为了实现多页面导航功能，需要集成 `vue-router` 到项目中。首先安装依赖包： ```bash npm install vue-router@next ``` 接着，在 `src/router/index.js` 文件中定义路由配置： ```javascript import { createRouter, createWebHistory } from 'vue-router'; import Home from '../pages/Home.vue'; const routes = [ { path: '/', name: 'Home', component: Home, }, ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` 最后在 `main.js` 中引入此路由器实例，并挂载至应用根节点上： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app'); ``` #### 3. 添加状态管理库 Pinia 或 Vuex 推荐使用更轻量级且更适合 Vue3 的 Pinia 替代传统 Vuex 进行状态管理。如果决定采用 Pinia，则先完成其安装操作： ```bash npm install pinia ``` 随后于入口文件处注册插件服务： ```javascript import { createPinia } from 'pinia'; const app = createApp(App); const pinia = createPinia(); app.use(pinia).use(router).mount('#app'); ``` #### 4. UI 组件库的选择与按需加载（Vant） 选用流行的移动设备专用UI框架——Vant作为界面组件解决方案之一。同样地，我们可以通过 npm 来获取最新版本资源包： ```bash npm i vant ``` 对于减少打包体积而言，建议采取按需导入方式而非整体引入全部模块。具体做法如下所示： ```javascript // src/plugins/vant.js import { Button, List, Cell, Tabbar, TabbarItem } from 'vant'; import 'vant/es/button/style'; // 单独引入样式表 import 'vant/es/list/style'; import 'vant/es/cell/style'; import 'vant/es/tabbar/style'; import 'vant/es/tabbar-item/style'; export function setupVant(app) { app.use(Button).use(List).use(Cell).use(Tabbar).use(TabbarItem); } ``` 之后只需调用上述方法即可完成相应组件的功能绑定工作： ```javascript import { setupVant } from '@/plugins/vant'; setupVant(app); ``` #### 5. 处理网络请求 Axios 为了让前端能够方便快捷地发起HTTP通信动作，这里还额外集成了Axios工具类支持跨域访问外部API接口数据源的能力。 ```bash npm install axios ``` 编写简单的封装函数供后续业务逻辑调用： ```javascript // utils/request.js import axios from 'axios'; const service = axios.create({ baseURL: '/api', // API 地址前缀 timeout: 5000 // 请求超时时间(ms) }); service.interceptors.request.use(config => config); service.interceptors.response.use( response => response.data, error => Promise.reject(error) ); export default service; ``` #### 6. 自定义主题颜色 ConfigProvider 借助 Vant 提供的主题定制能力调整默认配色方案满足个性化需求。编辑 main.css 文件加入覆盖声明语句： ```css /* 修改按钮背景 */ .van-button--primary{ background-color:#ff7f50 !important ; border:none!important ; } /* 更改字体大小 */ html,body,#app{font-size:18px;} ``` 同时记得将这些自定义规则纳入全局作用范围之内以便生效。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值