【Vue】Vue制作 tabbar

最新推荐文章于 2024-05-18 18:15:28 发布
最新推荐文章于 2024-05-18 18:15:28 发布
阅读量715 收藏 5
点赞数 2
分类专栏： Vue Js CSS 文章标签： vue html css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41319058/article/details/107082555
版权
Vue 同时被 3 个专栏收录
9 篇文章 0 订阅
订阅专栏
Js
8 篇文章 0 订阅
订阅专栏
CSS
3 篇文章 0 订阅
订阅专栏

使用 Vue 制作 tabbar

  1. Demo地址 ： https://github.com/lpzzzz/vue-tabbar

1. 创建项目

  1. vue-cli2.0使用 vue init webpack tabbar 命令创建项目。

    vue init webpack tabbar

在这里插入图片描述

在这里插入图片描述

  1. 在style中引用资源需要使用 @import 进行引用；

2. 删除项目中多余的默认组件以及样式

在这里插入图片描述

3. 编写简单的基础界面

  1. 编写简单的界面启动测试。
1. npm install
2. npm run dev

3.1 清除页面的默认样式

  1. 在assets文件夹中创建img 和 css等静态资源文件夹。

在这里插入图片描述

  1. 清除页面默认样式
body {
  margin: 0;
  padding: 0;
}
  1. 在App.vue中引用样式
@import "./assets/css/base.css";
  1. 编写基本的结构代码 ：快捷方法=> #tabbar>div.tabbar-item*4
<div id="tabbar">
      <div class="tabbar-item">首页</div>
      <div class="tabbar-item">分类</div>
      <div class="tabbar-item">购物车</div>
      <div class="tabbar-item">我的</div>
</div>
  1. 编写结构简单样式
#tabbar {
    /*文字水平分布*/
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 49px;
    background-color: #f7f7f7;
    /*设置阴影 box-shadow: x轴偏移（正向右偏移） y轴偏移（正值向下偏移） 阴影高度 颜色值 */
    box-shadow: 0 -3px 5px rgba(100, 100, 100, .1);
  }

  .tabbar-item {
    /*每一项均等分*/
    flex: 1;
    text-align: center;
  }
  1. 以上代码没有较强的复用性。

3.2 封装（抽取）组件

3.2.1 抽取App中的Tabbar
  1. 将Tabbar代码块内的代码抽取为一个新的组件Tabbar.vue
  2. 在App.vue中 import Tabbar from “./components/tabbar/Tabbar”
  3. 在 components中 注册组件
 <div id="tabbar">
    <div class="tabbar-item">
      <img src="../../assets/img/tabbar/home.svg" alt="">
      <div>首页</div>
    </div>
    <div class="tabbar-item">
      <img src="../../assets/img/tabbar/category.svg" alt="">
      <div>分类</div>
    </div>
    <div class="tabbar-item">
      <img src="../../assets/img/tabbar/shopcart.svg" alt="">
      <div>购物车</div>
    </div>
    <div class="tabbar-item">
      <img src="../../assets/img/tabbar/profile.svg" alt="">
      <div>我的</div>
    </div>
  </div>
3.2.2 抽取 Tabbar组件中的Tabbar-item
  1. 抽取Tabbar中的大量代码，使用slot插槽进行替换。
<template>
  <div id="tabbar">
    <slot> </slot>
  </div>
</template>

<script>
  export default {
    name: "tabbar"
  }
</script>

<style scoped>
  #tabbar {
    /*文字水平分布*/
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 49px;
    background-color: #f7f7f7;
    /*设置阴影 box-shadow: x轴偏移（正向右偏移） y轴偏移（正值向下偏移） 阴影高度 颜色值 */
    box-shadow: 0 -3px 5px rgba(100, 100, 100, .1);
  }
</style>
3.2.3 将Tabbar-item中的部分抽取出来使用具名插槽替换方便后面扩展
<template>
  <div class="tabbar-item">
    <!--在这里使用具名插槽在使用的时候进行替换即可-->
    <slot name="slot-icon"/>
    <slot name="slot-text"/>
  </div>
</template>

<script>
  export default {
    name: "tabbar-item"
  }
</script>

<style scoped>
  .tabbar-item {
    /*每一项均等分*/
    flex: 1;
    text-align: center;
    vertical-align: middle;
    margin-top: 3px;
    font-size: 14px;
    margin-bottom: 2px;
  }

  /*设置图标样式*/
  .tabbar-item img {
    height: 24px;
    width: 24px;
  }
</style>
3.2.4 在App中引入组件进行使用
  1. 在App中使用 script代码块中使用 import … 引入自定义的组件进行使用。
import Tabbar  from "./components/tabbar/Tabbar"
 import TabbarItem from "./components/tabbar/Tabbar-item"
  1. 在App中使用引入的组件如下：
<template>
  <div id="app">
    <Tabbar>
      <tabbar-item>
        <img  slot="slot-icon" src="./assets/img/tabbar/home.svg" alt="">
        <div slot="slot-text">首页</div>
      </tabbar-item>
      <tabbar-item>
        <img  slot="slot-icon" src="./assets/img/tabbar/category.svg" alt="">
        <div slot="slot-text">分类</div>
      </tabbar-item>
      <tabbar-item>
        <img slot="slot-icon" src="./assets/img/tabbar/shopcart.svg" alt="">
        <div slot="slot-text">购物车</div>
      </tabbar-item>
      <tabbar-item>
        <img  slot="slot-icon" src="./assets/img/tabbar/profile.svg" alt="">
        <div slot="slot-text">我的</div>
      </tabbar-item>
    </Tabbar>
  </div>
</template>

<script>
 import Tabbar  from "./components/tabbar/Tabbar"
 import TabbarItem from "./components/tabbar/Tabbar-item"
  export default {
    name: 'App',
    components: {
      // 引入组件之后需要进行注册
      Tabbar,
      TabbarItem
    }
  }

</script>

<style>
    /*引入外部样式的方式样式style内需要使用 @import*/
  @import "./assets/css/base.css";
</style>

3.3 给Tabbar-item传入active图片

  1. 新增插槽并且在插槽上加上判断根据条件进行激活显示。
<template>
    
  <div class="tabbar-item">
    <!--在这里使用具名插槽在使用的时候进行替换即可-->
    <div v-if="!isActive">
      <slot name="slot-icon"/>
    </div>
      
    <!--活跃状态下的图片插槽-->
    <div v-else>
      <slot name="slot-icon-active"/>
    </div>
    <!--需要使用一个div将其进行包裹起来，否则在使用的时候会将插槽的内容全部替换里面的属性样式都会被替换掉-->
    <!--<slot :class="{active:isActive}" name="slot-text"/>-->
    <div :class="{active:isActive}">
      <slot name="slot-text"/>
    </div>
  </div>
</template>
<script>
  export default {
    name: "tabbar-item",
    data() {
      return {
        isActive: false
      }
    }
  }
</script>

<style scoped>
  .tabbar-item {
    /*每一项均等分*/
    flex: 1;
    text-align: center;
    vertical-align: middle;
    margin-top: 3px;
    font-size: 14px;
    margin-bottom: 2px;
  }

  /*设置图标样式*/
  .tabbar-item img {
    height: 24px;
    width: 24px;
  }

  .active {
    color: red;
  }
</style>
  1. 注意：在使用插槽的时候填充到插槽中的内容会替换掉插槽内的所有内容，所以进行使用一个div将插槽包裹起来，在div中写一些必要的属性。像下面这样：
  <!--需要使用一个div将其进行包裹起来，否则在使用的时候会将插槽的内容全部替换里面的属性样式都会被替换掉-->
    <!--<slot :class="{active:isActive}" name="slot-text"/>-->
    <div :class="{active:isActive}">
      <slot name="slot-text"/>
    </div>

3.4 Tabbar-item与路由相结合

  1. 每个Tabbar-item都和一个路由跳转相对应。
3.4.1 安装路由操作
  1. 如果在创建项目的时候没有安装路由，需要使用命令进行安装：npm install vue-router -save 。创建router文件夹。在文件夹中创建index.js文件。文件中的内容如下 ：
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = () => import('../views/home/Home')
const Category = () => import('../views/category/Category')
const Cart = () => import('../views/cart/Cart')
const Profile = () => import('../views/profile/Profile')

// 创建路由对象  注意这里是routes 不要写作 routers 不然切换路由时 router-view都不会显示
const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/category',
    component: Category
  },
  {
    path: '/profile',
    component: Profile
  },
  {
    path: '/cart',
    component: Cart
  }
]

const router = new VueRouter({
  routers
})


// 导出router
export default router
3.4.2 在main.js中引用导入路由并使用
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
3.4.3 创建各个组件
  1. 各个组件尽量不要建立到components文件夹中，该文件夹中存放的是一些公共的组件。
  2. 可以新建一个views或者pages存放新的每一个单一的组件。

在这里插入图片描述

3.4.4 在Tabbar-item组件上注册监听事件
  1. 监听事件上设置路由的跳转，this.$router.push(目的路径)；

在这里插入图片描述

在这里插入图片描述

3.4.5 在App中传递过来跳转的路径

在这里插入图片描述

3.5 Tabbar-item的颜色动态控制

  1. 将isActive设置为计算属性，根据当前选中的路由路径判断当前选中的状态。返回一个Boolean值；
	// 在TabbarItem中添加如下代码
	 computed: {
      isActive() {
        /*该条件成立的时候表示某个tabbar-item属于活跃状态*/
        return this.$route.path.indexOf(this.path) !== -1
      }
    }

3.6 TabbarItem中文字颜色

3.6.1 思路
  1. 需要在props中定义一个属性。用于接收来自App中传递过来的颜色设置。设置props中的属性名称为activeColor 类型为 String 默认值为red 在TabbarItem组件中的文字上绑定上style 的计算属性。

在这里插入图片描述

路径判断当前选中的状态。返回一个Boolean值；

	// 在TabbarItem中添加如下代码
	 computed: {
      isActive() {
        /*该条件成立的时候表示某个tabbar-item属于活跃状态*/
        return this.$route.path.indexOf(this.path) !== -1
      }
    }

3.6 TabbarItem中文字颜色

3.6.1 思路
  1. 需要在props中定义一个属性。用于接收来自App中传递过来的颜色设置。设置props中的属性名称为activeColor 类型为 String 默认值为red 在TabbarItem组件中的文字上绑定上style 的计算属性。

在这里插入图片描述
在这里插入图片描述

3.7 抽取Tabbar中App中的大量代码到Main.vue组件中

<template>
  <Tabbar>
    <tabbar-item path="/home" activeColor="red">
      <img slot="slot-icon" src="../assets/img/tabbar/home.svg" alt="">
      <img slot="slot-icon-active" src="../assets/img/tabbar/home_active.svg" alt="">
      <div slot="slot-text">首页</div>
    </tabbar-item>
    <tabbar-item path="/category" activeColor="green">
      <img slot="slot-icon" src="../assets/img/tabbar/category.svg" alt="">
      <img slot="slot-icon-active" src="../assets/img/tabbar/category_active.svg" alt="">
      <div slot="slot-text">分类</div>
    </tabbar-item>
    <tabbar-item path="/cart" activeColor="blue">
      <img slot="slot-icon" src="../assets/img/tabbar/shopcart.svg" alt="">
      <img slot="slot-icon-active" src="../assets/img/tabbar/shopcart_active.svg" alt="">
      <div slot="slot-text">购物车</div>
    </tabbar-item>

    <tabbar-item path="/profile">
      <img slot="slot-icon" src="../assets/img/tabbar/profile.svg" alt="">
      <img slot="slot-icon-active" src="../assets/img/tabbar/profile_active.svg" alt="">
      <div slot="slot-text">我的</div>
    </tabbar-item>
  </Tabbar>
</template>

<script>
  import Tabbar from "../components/tabbar/Tabbar"
  import TabbarItem from "../components/tabbar/Tabbar-item"

  export default {
    name: "main-tabbar",
    components: {
      // 引入组件之后需要进行刚注册
      Tabbar,
      TabbarItem
    }
  }
</script>

<style scoped>

</style>

3.8 文件路径起别名（文件路径的引用问题）

  1. 修改 webpack.base.conf.js 配置文件 中的下面部分：
    在这里插入图片描述
  2. 在属性中使用：引用src文件路径需要在前面加上~
    在这里插入图片描述
  3. 引用外部组件
    在这里插入图片描述

4. 最终效果

在这里插入图片描述

四通一达小新星
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue自定义底部导航栏Tabbar的实现代码
12-29
如图所示，要完成类似的一个底部导航切换。 首先。我们需要分为5个大的VUE文件。可以根据自己的习惯来放在不同的位置。 我将5个主要的vue文件放在了5个不同的文件夹 然后,在components文件夹里新建Tabbar.vue/以及Item.vue文件 Item.vue文件如下 <slot n
vue项目创建tabbar
zss_web的博客
07-17 183
<van-tabbar v-model="tabIndex" router border fixed z-index="10" active-color="#42B0ED" inactive-color="#2A2A2A"> <van-tabbar-item replace :to="item.path" v-for="(item,index) in tabbarList" :key="index"> <span>{{item...
Vue.js中组件化开发实践：自定义导航栏与TabBar组件的设计与实现
最新发布
chenchuang0128的博客
05-18 524
摘要随着前端技术的发展和业务的日益复杂，组件化开发成为提升开发效率和降低维护成本的关键。本文将以Vue.js框架为基础，探讨如何设计并实现一个自定义的导航栏与TabBar组件，特别是针对iOS机型的适配和头部导航的自定义。通过阿里巴巴矢量图标库的使用，我们将展示如何为组件添加高度和图标自定义的功能。一、引言在前端开发中，导航栏和TabBar是常见的界面元素，对于用户体验和界面美观度至关重要。然而，传统的开发方式往往将这些元素作为整体应用的一部分，导致修改和维护变得困难。
vue实现tabbar功能
weixin_30555753的博客
03-12 894
要写一个小项目，tabbar要重用因而独立出组件，遇到不少坑，赶紧记录下来： <template> <div class="tab"> <div class="tabItem"> <router-link class="tabTo" to="/"> <...
使用VueCLI制作TabBar
qq_46685404的博客
05-31 124
使用VueCLI制作TabBar 1 创建项目 在控制台输入： vue create tabbar 选择配置后项目创建成功。 2 编写基础页面 把创建好后的文件夹里面一些自带的组件删除，接着在/src/asset文件夹下创建两个新文件夹：css和img，用来放置css代码和项目要用的图片。在css文件夹里创建base.css文件用来清除页面的默认样式。 body { padding: 0; margin: 0; } 并在App.vue文件中的<style></styl
Vue(小码哥王洪元)笔记07路由案例tabbar
weixin_43745804的博客
01-17 680
1、tabbar案例01 1、创建一个样式文件base.css body{margin:0; padding: 0;} 2、修改App.vue <template> <div id="app"> <div id="tab-bar"> <div class="tab-bar-item">首页</div> <div class="tab-bar-item">分类</div>
Vue学习Day13 封装一个TabBar组件
AIpoem的博客
07-17 216
1.TabBar实现思路 2.TabBar具体实现
vue组件封装-tabBar底部导航栏
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
11-02 1171
效果图： 组件代码： <template> <!-- 自定义底部菜单栏===》模拟小程序菜单栏效果 --> <div class="tabbar"> <!-- 占位容器===》页面设置占位容器是为了抵消底部导航栏固定定位的高度。 --> <div class="placegolder-container"></div> <!-- 底部导航栏 --> <div cla.
vue自定义底部导航栏Tabbar
lhrdlp的学习笔记
08-06 1374
使用vue封装一个如下图所示的组件 主要的项目结构如下: 在component/tabbar中新建组件TabBar.vue,内容如下: <template> <div class="tab-bar"> <slot></slot> </div> </template> <script> import TabBarItem from './TabBarItem' export default {
Vue学习 —— 创建公共tabbar功能
因风初苒苒
05-23 260
一、使用脚手架Vue-cli2创建项目 二、处理样式 在src下的asset文件夹下存放资源，创建img文件夹用于存放图片；创建css文件夹用于存放公共样式，css文件夹下创建base.css，先将边距设置为0 在app.vue中引入base.css 三、编写tabbar组件 在components组件文件夹下创建tabbar文件夹，文件夹下创建Tabbar.vue以及tabbarItem.vue 下面为tabbar.vue的代码: <template> <div id="tab-
Vue学习笔记（七）Tabbar
过眼云烟—了凡
06-15 186
设置tab-bar 的上边框阴影 中用到的 box-shadow x，y偏移量 第三个参数是模糊程度 rgba（100,100,100，0.8） 最后一个0.8是透明度
自定义组件 顶部导航栏topTabbar vue / uniapp
m0_52336986的博客
03-08 943
一个顶部导航组件，支持多个title
微信小程序自定义tabbar页面（引用组件方式）
zzbxyz
07-04 1614
最近在做一个小程序，需求是从一个非tabbar页面跳转到tabbar页面，tabbar页面左上角还要有返回键，要返回到原来的非tabbar页面，微信官方的组件不能满足，于是自定义tabbar组件： 1.tabbar页面 wxml <view class='root'> <view class='box-h'> <view wx:if="{{currentTab == 0}}"> <storeworkbench class='storew
vue项目启动报错 in ./src/App.vue?vue&type=style&index=0&lang=scss解决办法
热门推荐
草莓味的青
07-21 1万+
vue项目启动报错：in ./src/App.vue?vue&type=style&index=0&lang=scss解决办法
vue组件化思想应用之tabbar
weixin_42761614的博客
01-27 124
vue组件化思想应用之tabbar App.vue调用了TabBar.vue和TabbarItem.vue 其中App.vue html代码 <template> <div id="app"> <tab-bar> <tab-bar-item v-for="(value,name) in tabbar" :key="name"> <img slot="item-icon" :src="require('./asset
uniapp 实现不同用户展示不同的tabbar(底部导航栏)
weixin_71403100的博客
09-19 1万+
最近在做一个uniapp开发的小程序遇到一个需求，希望不同用户登录后展示不同的tabbar页面，但是uniapp项目中的pages.json是只有一个list数组的，并且是不能写成动态效果，为了实现这个需求，便自定义了tabbar组件。
自定义vue底部导航栏组件tabbar
weixin_45663697的博客
09-06 3638
TabBar 自定义vue底部导航栏组件tabbar，效果如下所示： 1. 基本结构搭建 根据组件封装的思想，我们事先创建几个文件夹，用来存放对应部分的代码。文件结果如下图所示： 从效果图来看底部可以分为两个部分：最外层框架区和内层图标区 组件就是需要的时候可以直接引用并且方便更改，那么我们就可以将tabbar导航栏组件划分为两个小的组件：TabBar.vue、TabBarItem.vue TabBar.vue设置导航栏组件的外观形状 TabBarItem.vue负责设置内置图标汉字的样
180-Vue路由实例——tabbar路由跳转——路由嵌套
jolinoy的博客
08-16 1195
其它的四个组件，类同，只不过是，把template标签里面的文字，分别写为：分类，购物车，我的页面，404。router/index.js代码：这里设置路由跳转路径。此处设置的有嵌套路由。180-Vue路由实例——tabbar路由跳转——路由嵌套。最终的效果在最上面。...
Vue - 案例 - TabBar 思路 + 实现
LawssssCat的博客
03-05 708
文章目录# 效果# 思路# 代码 # 效果 # 思路 如果在下方有一个单独的TabBar组件，你如何封装 自定义TabBar组件，在APP中使用 让TabBar出于底部，并且设置相关的样式 TabBar中显示的内容由外界决定 定义插槽 flex布局平分TabBar 自定义TabBarItem，可以传入 图片和文字 定义TabBarItem，并且定义两个插槽：图片、文字。 给两个插槽外层包装di...
前端Vue实现tabbar组件
章鱼仔的博客
01-29 3814
tabbar组件的实现 TabBar.vue组件 tabbar组件只需要在内写一个插槽即可，将来往里面放tabbaritem即可 <template> <div id='tab-bar'> <slot></slot> </div> </template> <script> expor...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值