【VUE基础】综合练习-实现Tab-Bar

最新推荐文章于 2024-04-01 23:16:04 发布
最新推荐文章于 2024-04-01 23:16:04 发布
阅读量979 收藏 3
点赞数 1
分类专栏： VUE相关 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013301892/article/details/127422161
版权

1. 实现Tab-Bar思路

  1. 下方单独的Tab-Bar组件如何封装？
    • 自定义Tab-Bar组件，在APP中使用
    • 让Tab-Bar位置在底部，并设置你需要的样式
  2. Tab-Bar中显示的内容由外部决定
    • 定义插槽
    • flex布局平分Tab-Bar
  3. 自定义Tab-Bar-Item，可以传入图片和文字
    • 定义Tab-Bar-Item，并定义两个插槽：图片和文字
    • 给插槽外层包装div，设置样式
    • 填充插槽，实现底部Tab-Bar的效果
  4. 传入高亮图片
    • 定义另一个插槽，插入active-icon的数据
    • 定义一个变量isActicve，通过v-show来决定是否显示对应的icon
  5. Tab-Bar-Item绑定路由数据
    • 安装路由：npm install vue-router --save
    • 在router/index.js配置路由信息，并创建对应的组件
    • main.js中注册router
    • App.vue中使用router-link和router-view
  6. 点击item跳转到对应的路由，并且动态决定isActive
    • 监听item的点击，通过this.$router.replace()替换路由路径
    • 通过this.$route.path.indexOf(this.link)!==-1来判断是否使active
  7. 动态计算active样式
    • 封装新的计算属性：this.isActive?{'color': 'red'}:{}

2. 代码实现

使用vue init webpack 02-vue-router-tabbar-v1新建一个项目工程(使用vuecli2)。

  1. 在文件夹assest下新建css/base.css,用于初始化css

    base.css

    body {
  padding: 0;
  margin: 0;
}

    修改App.vue，添加初步样式

    <template>
  <div id="app">
    <div id="tar-bar">
      <div class="tar-bar-item">首页</div>
      <div class="tar-bar-item">分类</div>
      <div class="tar-bar-item">购物车</div>
      <div class="tar-bar-item">我的</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
    /* style中引用使用@import */
  @import url('./assets/css/base.css');

  #tar-bar {
    display: flex;
    background-color: #f6f6f6;

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    box-shadow: 0 -1px  1px rgba(100, 100, 100, .2);
  }

  .tar-bar-item {
    flex: auto;
    text-align: center;
    height: 49px;
    font-size: 20px;
  }
</style>

    使用npm run dev，查看网页效果

     										![](https://img-blog.csdnimg.cn/img_convert/2a2e833d84ddb54f53fa77b38af0f241.png)

    思考：如果每次都要复用tabbar，那每次都需要复制粘贴，应该要把tabbar抽离出来，vue就是组件化思想。

  2. 将tabbar抽离成组件

    在components下新建tabbar文件夹，新建TarBar.vue和TabBarItem.vue,TabBarItem组件是在组件TarBar中抽取出来的，可以传入图片和文字（比如首页），所有需要使用插槽<slot>代替。

    TarBar.vue

    <template>
       <div id="tab-bar">
         <!-- 插槽代替tabbaritem -->
         <slot></slot>
       </div>
   </template>
   <script type="text/ecmascript-6">
   export default {
     name: 'TabBar'
   }
   </script>
   <style scoped>
     #tab-bar {
       display: flex;
       background-color: #f6f6f6;
       position: fixed;
       left: 0;
       right: 0;
       bottom: 0;

       box-shadow: 0 -1px  1px rgba(100, 100, 100, .2);
      }
 </style>

    TabBar弄一个slot插槽用于插入TabBarItem组件（可能插入多个）.

    TabBarItem.vue

<template>
    <div class="tab-bar-item">
      <!-- item-icon表示图片插槽 item-text表示文字插槽，例如首页 -->
      <slot name="item-icon"></slot>
      <slot name="item-text"></slot>
    </div>
</template>
<script type="text/ecmascript-6">
  export default {
    name: 'TabBarItem'
  }
</script>
<style scoped>
  .tab-bar-item {
    flex: auto;
    text-align: center;
    height: 49px;
    font-size: 14px;
  }
  .tab-bar-item img {
    height: 24px;
    width: 24px;
    margin-top: 3px;
    vertical-align: middle;
    margin-bottom: 2px;
  }
</style>

TabBarItem组件中插入2个插槽一个用于插入图片一个用于插入文字。

MainTabBar.vue

<template>
  <div class="main-tab-bar">
    <TabBar>
      <TabBarItem path="/home" activeColor="blue">
        <img slot="item-icon" src="~assets/img/tabbar/home.png" alt="" srcset="">
        <template v-slot:item-text>
          <div>首页</div>
        </template>
      </TabBarItem>
      <TabBarItem path="/categories">
        <template #item-icon>
          <img src="~assets/img/tabbar/categories.png" alt="" srcset="">
        </template>
        <template #item-text>
          <div>分类</div>
        </template>
      </TabBarItem>
      <TabBarItem path="/shop">
        <template #item-icon>
          <img src="~assets/img/tabbar/shopcart.png" alt="" srcset="">
        </template>
        <template #item-text>
          <div>购物车</div>
        </template>
      </TabBarItem>
      <TabBarItem path="/me">
        <template #item-icon>
          <img src="~assets/img/tabbar/profile.png" alt="" srcset="">
        </template>
        <template #item-text>
          <div>我的</div>
        </template>
      </TabBarItem>
    </TabBar>
  </div>
</template>
<script type="text/ecmascript-6">
  import TabBar from "@/components/tabbar/TabBar"
  import TabBarItem from "@/components/tabbar/TabBarItem"
  export default {
    name: "MainTabBar",
    components: {
      TabBar,
      TabBarItem
    }
  }
</script>
<style scoped>
</style>

在MainTabBar组件中加入另外2个组件。

注意此处使用~assets和@/components是使用了别名配置，详情请看3.别名配置

最后在app.vue中导入MainTabBar组件。

<template>
  <div id="app">
    <MainTabBar></MainTabBar>
  </div>
</template>
<script>
  import MainTabBar from '@/components/MainTabBar'
  export default {
    name: 'App',
    components: {
      MainTabBar
    }
  }
</script>
<style>
    /* style中引用使用@import */
  @import url('./assets/css/base.css');
</style>

效果如图所示，将组件进行了分离重组，只要修改MainTabBar组件就可以修改图片和文字描述，可以复用。

  1. 如何实现点击首页首页字体变红图片变红色

    这里需要用到路由的active-class。

    思路：引用2张图片，一张是正常颜色一张是红色，使用v-if和v-else来处理是否变色，在路由处于活跃状态的时候，变红色。

    引入路由使用路由就不细说了，这里仅贴上tabbar的修改代码。

    TabBarItem.vue组件

    <template>
    <div class="tab-bar-item" :style="activeStyle" @click="itemClick">
      <!-- item-icon表示图片插槽 item-text表示文字插槽，例如首页 -->
      <div v-if="!isActive">
        <slot  name="item-icon"></slot>
      </div>
      <div  v-else>
        <slot name="item-icon-active"></slot>
      </div>
      <div :class="{active:isActive}">
        <slot name="item-text"></slot>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'TabBarItem',
    props:{
      path:String,
      activeColor:{
        type:String,
        default:'red'
      }
    },
    computed: {
      isActive(){
        return this.$route.path.indexOf(this.path) !== -1
      },
      activeStyle(){
        return this.isActive ? {color: this.activeColor} : {}
      }
    },
    methods: {
      itemClick(){
        this.$router.push(this.path)
      }
    }
  }
</script>

<style scoped>
  .tab-bar-item {
    flex: auto;
    text-align: center;
    height: 49px;
    font-size: 14px;
  }

  .tab-bar-item img {
    height: 24px;
    width: 24px;
    margin-top: 3px;
    vertical-align: middle;
    margin-bottom: 2px;
  }
</style>
    1. 使用props获取传递的值，这里传递是激活颜色，默认是红色
    2. 设置计算属性isActive和activeStyle，分别表示激活状态和激活的样式
    3. 定义itemClick()方法用于获取点击事件，点击后使用代码实现路由跳转，这里使用默认的hash模式
    4. 使用v-if和v-else来进行条件判断

    MainTabBar.vue组件

          <TabBarItem path="/home">
        <img slot="item-icon" src="~assets/img/tabbar/home.png" alt="" srcset="">
        <img slot="item-icon-active" src="~assets/img/tabbar/home_active.png" alt="" srcset="">
        <template v-slot:item-text>
          <div>首页</div>
        </template>
      </TabBarItem>

    添加激活状态的图片与未激活的图片并列。

  2. 配置路由信息，参考之前的代码

    import Vue from 'vue'
import Router from 'vue-router'


Vue.use(Router)

const routes = [
  {
    path: '/',
    redirect: '/home'//缺省时候重定向到/home
  },
  {
    path: '/home',
    component: () => import ('../views/home/Home.vue')
  },
  {
    path: '/categories',
    component: () => import ('../views/categories/Categories.vue')
  },
  {
    path: '/shop',
    component: () => import ('../views/shop/Shop.vue')
  },
  {
    path: '/profile',
    component: () => import ('../views/profile/Profile.vue')
  },
]

export default new Router({
  routes,
  // linkActiveClass:"active"
})

  3. 修改main.js和App.vue

    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)
})

    <template>
  <div id="app">
    <router-view></router-view>
    <MainTabBar></MainTabBar>
  </div>
</template>

<script>
  import MainTabBar from '@/components/MainTabBar'
  export default {
    name: 'App',
    components: {
      MainTabBar
    }
  }
</script>

<style>
    /* style中引用使用@import */
  @import url('./assets/css/base.css');

</style>

3. 别名配置

经常的我们向引入图片文件等资源的时候使用相对路径，诸如../assets/xxx这样的使用../获取上一层，如果有多个上层就需要../../xxx等等这样不利于维护代码。此时就需要一个能获取到指定目录的资源的就好了。

配置

在webpack.base.config中配置使用别名，找到resolve:{}模块，增加配置信息

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
      'assets': resolve('src/assets'),
      'components': resolve('src/components'),
      'views': resolve('scr/views')
    }
  },

这里@指定目录是src，例如@/components表示src/components目录，assets表示src/assets前缀，如果是assets/img就表示src/assets/img目录。

攻城狮·建哥
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue3搭建移动端项目(5)-路由vue-router配置
weixin_40220492的博客
08-14 908
vue3搭建移动端项目(5)-路由vue-router配置
vue-router-tab:Vue.js tab 组件，基于 Vue Router
08-05
Vue.js 选项卡组件，基于 Vue Router。 :pushpin: 特征 :check_mark_button: 打开或切换到响应路由更改的选项卡 :check_mark_button: 标签鼠标滚轮滚动 :check_mark_button: 标签拖动排序 :check_mark_button: ...
vue自定义底部导航栏Tabbar的实现代码
10-18
主要介绍了vue自定义底部导航栏Tabbar的实现代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue-router的TabBar的实现思路
Da_ci_hua的博客
12-11 718
vue-router的TabBar的实现思路
vue自定义tab导航栏（方法一）
weixin_72671719的博客
04-01 534
八、上自定义tab代码（layoutIndex.vue）成功自定义tab导航栏！基本架子，内置自定义底部导航栏代码。三、安装Vue Router。一、引用Vant 4组件库。六、 配置router内容。二、快速上手Vant4。九、配置App.vue。
vue-router（七）-案例：TabBar ｜ 青训营笔记
weixin_50945128的博客
02-09 156
theme: condensed-night-purple highlight: a11y-dark 这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天 TabBar TabBar实现思路 1. 如果在下方有一个单独的TabBar组件，你如何封装 自定义TabBar组件，在APP中使用 让TabBar出于底部，并且设置相关的样式 2.TabBar中显示的内容由外界决定 ...
移动端 Tab Bar 的设计基础知识点1
Tianlran的博客
12-31 941
移动端 Tab Bar 的设计基础知识点1
vue--实现Tabbar
小白小白从不日别的博客
12-16 3178
最终实现的大致效果如下： 这里一样采用组件封装的方式，大致如下： 组件拆分: MyHeader.vue – 复用之前的（上一个案例 vue--实现购物车 时里面封装的 头部组件） MyTabBar.vue – 底部导航 MyTable.vue – 封装表格 三个页面 - MyGoodsList.vue – 商品页 - MyGoodsSearch.vue – 搜索页 - MyUserInfo.vue – 用户信息页 需要安装的第三方包： npm install less ..
vue3-实战-05-管理后台顶部tabbar开发-全局守卫
ycmy2017的博客
06-06 973
layout顶部功能组件的开发和封装-菜单折叠-面包屑-全屏-刷新等-全局组件守卫
Vue实现自定义tabbar
weixin_41395548的博客
11-19 1233
Vue实现自定义tabbar <template> <div class="tabbar footer"> <div class="tabbar-item" v-for="(item,index) in tabbarList" :key="index" @click="switchTab(item)"> <div class="tab_icon"> <img :src="item.pag
解决vue中el-tab-pane切换的问题
10-15
主要介绍了解决vue中el-tab-pane切换的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue+mintUI实现移动端tabbar左右滑动切换
05-22
下载并解压到项目文件夹下，使用npm install安装依赖，使用npm run serve命令启动项目。
mpvue自定义小程序tabBar
08-10
mpvue 自定义小程序tabBar
vue综合小练习-todolist案例
最新发布
05-29
vue技术todolist小案例，实现代办事项的增删改查。包含了vuex状态管理等技术，功能齐全，适合新手小白使用。推荐下载！！！！！！！！！！！！！！！！！！！！！！！！ 阅读建议：不仅是代码编写实现也更注重内容上...
vue3实现v-model原理详解
10-16
主要介绍了vue3实现v-model原理详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-slide-bar-非常简单的vue滑动条组件。-Vue.js开发
05-27
slide-bar-保存或添加纱线vue-slide-bar用法// main.js从“ vue”导入Vue从“ vue-slide-bar”导入Vue Vue.component（ 'VueSlideBar'，VueSlideBar）或// xxx.vue从'vue-slide-bar'导入VueSlideBar导出默认{组件：{...
vue实现tab选项卡的多种方法
weixin_43353869的博客
05-29 2731
第一种 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .active {
vue中的el-tab-pane默认
09-07
在Vue中，el-tab-pane是Element UI组件库中的一个标签页组件。它在默认情况下使用v-show指令来进行切换显示，默认情况下会根据条件来决定显示或隐藏el-tab-pane。但是有时候可能会遇到v-show或v-if无效的情况。一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

攻城狮·建哥

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

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

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

打赏作者

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

抵扣说明：

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

余额充值