TabBar案例及思考

最新推荐文章于 2023-03-20 20:22:04 发布
最新推荐文章于 2023-03-20 20:22:04 发布
阅读量193 收藏
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ulrica_Amaris/article/details/115458584
版权

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

vue init webpack TabBar
目录结构
在这里插入图片描述
结构搭建

APP.vue

<template>
  <div id="app">
    <div class="tabbar">
    <div class="tab-bar-item">
    <img src="../assets/img/tabbar/home.svg" alt="">
     首页</div>
    <div class="tab-bar-item">
    <img src="../assets/img/tabbar/home.svg" alt="">
    分类</div>
    <div class="tab-bar-item">
    <img src="../assets/img/tabbar/home.svg" alt="">
    商城</div>
    <div class="tab-bar-item">
    <img src="../assets/img/tabbar/home.svg" alt="">
    我的</div>
  </div>
    </div>
  
</template>

<script>

import TabBar from './components/TabBar.vue'
export default {
  name: 'App',
  components:{
    TabBar
    
  }
}
</script>

<style>
//css引入方式
@import url('./assets/css/base.css');
.tabbar{
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 49px;
  background-color: #f6f6f6;
  line-height: 49px;
  font-size: 18px;
  box-shadow: 0 -2px rgba(0,0,0,.1);
}
.tab-bar-item{
  flex: 1;
  text-align: center;
  
}
.tab-bar-item img{
    width: 24px;
    height: 24px;
}
</style>

此时效果
在这里插入图片描述
文件抽离成组件

都放在APP.vue里过于繁琐

新建TabBar.vue

<template>
  <div class="tabbar">
    <div class="tab-bar-item">
        <img src="../assets/img/tabbar/home.svg" alt="">
        首页</div>
    <div class="tab-bar-item"><img src="../assets/img/tabbar/home.svg" alt="">分类</div>
    <div class="tab-bar-item"><img src="../assets/img/tabbar/home.svg" alt="">商城</div>
    <div class="tab-bar-item"><img src="../assets/img/tabbar/home.svg" alt="">我的</div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.tabbar{
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 49px;
  background-color: #f6f6f6;
  line-height: 49px;
  font-size: 18px;
  box-shadow: 0 -2px rgba(0,0,0,.1);
}
.tab-bar-item{
  flex: 1;
  text-align: center;
  
}
.tab-bar-item img{
    width: 24px;
    height: 24px;
}
</style>

此时要在APP.vue中导入

<template>
  <div id="app">
    <!--使用组件-->
    <tab-bar></tab-bar>
    </div>
  
</template>

<script>
//导入组件
import TabBar from './components/TabBar.vue'
export default {
  name: 'App',
  //注册组件
  components:{
    TabBar
  }
}
</script>

<style>
@import url('./assets/css/base.css');

</style>

但是此时TarBar又过于繁琐 它应该只管理TarBar的东西 无需管理tar-bar-item的东西

所以只需要在TarBar中定义一个插槽 tar-bar-item的东西放到APP.vue中进行渲染 如下：
TabBar.vue

<template>
  <div class="tabbar">
    <slot></slot>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.tabbar{
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 49px;
  background-color: #f6f6f6;
  line-height: 49px;
  font-size: 18px;
  box-shadow: 0 -2px rgba(0,0,0,.1);
}

</style>

App.vue

<template>
  <div id="app">
    <tab-bar>
    <div class="tab-bar-item"><img src="../assets/img/tabbar/home.svg" alt="">首页</div>
    <div class="tab-bar-item"><img src="../assets/img/tabbar/home.svg" alt="">分类</div>
    <div class="tab-bar-item"><img src="../assets/img/tabbar/home.svg" alt="">商城</div>
    <div class="tab-bar-item"><img src="../assets/img/tabbar/home.svg" alt="">我的</div>
    </tab-bar>
    </div>
  
</template>

<script>

import TabBar from './components/TabBar.vue'
export default {
  name: 'App',
  components:{
    TabBar
    
  }
}
</script>

<style>
@import url('./assets/css/base.css');
.tab-bar-item{
  flex: 1;
  text-align: center;
  
}
.tab-bar-item img{
    width: 24px;
    height: 24px;
}
</style>

但是很明显，此时APP.vue又过于复杂 所以我们还需要抽离成组件

新建TabBarItem组件：

//tab-bar-item的东西抽离到这里

<template>
  <div class="tab-bar-item"><img src="../assets/img/tabbar/home.svg" alt=""> 首页</div>
</template>

<script>
export default {

}
</script>

<style>
.tab-bar-item{
  flex: 1;
  text-align: center;
  
}
.tab-bar-item img{
    width: 24px;
    height: 24px;
}
</style>

App.vue

<template>
  <div id="app">
    <tab-bar>
    <tab-bar-item></tab-bar-item>
    <tab-bar-item></tab-bar-item>
    <tab-bar-item></tab-bar-item>
    <tab-bar-item></tab-bar-item>
    </tab-bar>
    </div>
  
</template>

<script>

import TabBar from './components/TabBar.vue'
import TabBarItem from './components/TabBarItem.vue'
export default {
  name: 'App',
  components:{
    TabBar,
    TabBarItem
    
  }
}
</script>

<style>
@import url('./assets/css/base.css');

</style>

此时效果
在这里插入图片描述
但是此时TabBarItem中的内容是写死的 无法改变 而且展示的都是一样的东西 所以我们需要使用插槽

TabBarItem.vue

<template>
<div class="tar-bar-item">
 	<!-- 图片插槽 -->
  <slot name="item-icon"></slot>
   <!-- 文字插槽 -->
  <slot name="item-text"></slot>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.tab-bar-item{
  flex: 1;
  text-align: center;
  
}
.tab-bar-item img{
    width: 24px;
    height: 24px;
}
</style>

此时就可以在APP.vue中定义不同的内容

<template>
  <div id="app">
    <tab-bar>
    <tab-bar-item>
      <img slot="item-icon" src="./assets/img/tabbar/home.svg" alt="">
      <div slot="item-text">首页</div>
    </tab-bar-item>
    <tab-bar-item>
      <img slot="item-icon" src="./assets/img/tabbar/category.svg" alt="">
      <div slot="item-text">分类</div>
    </tab-bar-item>
    <tab-bar-item>
      <img slot="item-icon" src="./assets/img/tabbar/shopcart.svg" alt="">
      <div slot="item-text">商城</div>
    </tab-bar-item>
    <tab-bar-item>
      <img slot="item-icon" src="./assets/img/tabbar/profile.svg" alt="">
      <div slot="item-text">我的</div>
    </tab-bar-item>
    </tab-bar>
    </div>
  
</template>

<script>

import TabBar from './components/TabBar.vue'
import TabBarItem from './components/TabBarItem.vue'
export default {
  name: 'App',
  components:{
    TabBar,
    TabBarItem
  }
}
</script>

<style>
@import url('./assets/css/base.css');

</style>

此时效果
在这里插入图片描述
到此 TabBar就已经封装好了 以后要使用就可以直接在APP.vue中定义不同内容了

但是此时只有一张图片 点击时无法更换图片
所以需要在定义一个插槽 并添加图片

TabBarItem.vue

<template>
<div class="tab-bar-item">
    <!-- 图片插槽 -->
  <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>
export default {
    data() {
        return{
            isActive:true
        }
    }

}
</script>

<style>
.tab-bar-item{
  flex: 1;
  text-align: center;
  margin-top: 3px;
  margin-bottom: 2px;
  font-size: 14px;
  vertical-align: middle;
  
}
.tab-bar-item img{
    width: 24px;
    height: 24px;
    
}
.active{
    color: red;
}
</style>

App.vue

<template>
  <div id="app">
    <tab-bar>
    <tab-bar-item>
      <img slot="item-icon" src="./assets/img/tabbar/home.svg" alt="">
      <img slot="item-icon-active" src="./assets/img/tabbar/home_active.svg" alt="">
      <div slot="item-text">首页</div>
    </tab-bar-item>
    <tab-bar-item>
      <img slot="item-icon" src="./assets/img/tabbar/category.svg" alt="">
      <img slot="item-icon-active" src="./assets/img/tabbar/category_active.svg" alt="">
      <div slot="item-text">分类</div>
    </tab-bar-item>
    <tab-bar-item>
      <img slot="item-icon" src="./assets/img/tabbar/shopcart.svg" alt="">
      <img slot="item-icon-active" src="./assets/img/tabbar/shopcart_active.svg" alt="">
      <div slot="item-text">商城</div>
    </tab-bar-item>
    <tab-bar-item>
      <img slot="item-icon" src="./assets/img/tabbar/profile.svg" alt="">
      <img slot="item-icon-active" src="./assets/img/tabbar/profile_active.svg" alt="">
      <div slot="item-text">我的</div>
    </tab-bar-item>
    </tab-bar>
    </div>
  
</template>

<script>

import TabBar from './components/TabBar.vue'
import TabBarItem from './components/TabBarItem.vue'
export default {
  name: 'App',
  components:{
    TabBar,
    TabBarItem 
  }
}
</script>

<style>
@import url('./assets/css/base.css');

</style>

插槽外面为啥加上div标签
如果不加 APP.vue中的内容会覆盖插槽 导致属性失效 加上div 覆盖插槽 也不会影响div中的属性

此时效果
在这里插入图片描述
现在进行路由配置
新建目录及文件
在这里插入图片描述
配置路由

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

const Home = () =>
    import ('../views/Home/Home')
const Category = () =>
    import ('../views/Category/Category')
const Shopcart = () =>
    import ('../views/Shuocart/Shopcart')
const Profile = () =>
    import ('../views/Profile/Profile')

Vue.use(Router)

export default new Router({
    routes: [{
            path: '',
            redirect: '/home'
        },
        {
            path: '/home',
            component: Home

        },
        {
            path: '/category',
            component: Category
        },
        {
            path: '/shopcart',
            component: Shopcart
        },
        {
            path: '/profile',
            component: Profile
        },

    ],
    mode: 'history'
})

配置 点击事件进行页面跳转

<template>
<div class="tab-bar-item" @click="Btnclick">
    <!-- 图片插槽 -->
  <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>
export default {
	//点击时 传过来的路径不能写死 所以需要props将路径传过来  路径在App.vue中定义
    props:{
        path:String
    },
    data() {
        return{
            isActive:true,
            
        }
    },
    methods:{
        Btnclick() {
        	//获取路径
            this.$router.push(this.path)      
        }
    }

}
</script>

<style>
.tab-bar-item{
  flex: 1;
  text-align: center;
  margin-top: 3px;
  margin-bottom: 2px;
  font-size: 14px;
  vertical-align: middle;
  
}
.tab-bar-item img{
    width: 24px;
    height: 24px;
    
}
.active{
    color: red;
}
</style>

App.vue中


<!-- 这里的path:'/home'等就是通过props传过去的路径 -->

<template>
  <div id="app">
    <router-view></router-view>
    <tab-bar>
    <tab-bar-item path="/home">
      <img slot="item-icon" src="./assets/img/tabbar/home.svg" alt="">
      <img slot="item-icon-active" src="./assets/img/tabbar/home_active.svg" alt="">
      <div slot="item-text">首页</div>
    </tab-bar-item>
    <tab-bar-item path="/category">
      <img slot="item-icon" src="./assets/img/tabbar/category.svg" alt="">
      <img slot="item-icon-active" src="./assets/img/tabbar/category_active.svg" alt="">
      <div slot="item-text">分类</div>
    </tab-bar-item>
    <tab-bar-item path="/shopcart">
      <img slot="item-icon" src="./assets/img/tabbar/shopcart.svg" alt="">
      <img slot="item-icon-active" src="./assets/img/tabbar/shopcart_active.svg" alt="">
      <div slot="item-text">商城</div>
    </tab-bar-item>
    <tab-bar-item path="/profile">
      <img slot="item-icon" src="./assets/img/tabbar/profile.svg" alt="">
      <img slot="item-icon-active" src="./assets/img/tabbar/profile_active.svg" alt="">
      <div slot="item-text">我的</div>
    </tab-bar-item>
    </tab-bar>
    </div>
  
</template>

到此 点击不同tabbaritem就可以进行页面跳转

此时还有一个问题 当我不点击时 active图片还是会显示
所以要进行修改

data() {
        return{
            // isActive:true,
            
        }
    },
    computed:{
        isActive() {
            return this.$route.path.indexOf(this.path) !== -1
        }
    },

isActive不要写死

return this.$route.path.indexOf(this.path) !== -1

this.$route.path 拿到当前活跃的路由 也就是点击的路由

判断它和this.path相不相等 相等返回1

在对应

<div v-if="!isActive"><slot name="item-icon"></slot></div>
  
<div v-else><slot name="item-icon-active"></slot></div>

就可以进行点击时图片切换

此时还有一个问题 文字颜色我们设置了红色 如果修改就要进到封装好的 组件中修改
所以进行以下修改

props:{
        path:String,
        activeColor:{
            type:String,
            default:'red'
        }
    },
    data() {
        return{
            // isActive:true,
            
        }
    },
    computed:{
        isActive() {
            return this.$route.path.indexOf(this.path) !== -1
        },
        activeStyle() {
        //判断isActive是否为true 为true就activeColor false就为空
            return this.isActive ? {color:this.activeColor} : {}
        }
    },
    methods:{
        Btnclick() {
            this.$router.push(this.path)      
        }
    }

//动态绑定style
<div :style="activeStyle"><slot name="item-text"></slot></div>

//这里添加要修改的颜色
 <tab-bar-item path="/home" activeColor= "blue">

在这里插入图片描述

完
总结：
v-if v-else的使用

计算属性的使用

组件化抽离的思想

插槽的使用

路由的配置

props的使用

MichstaBe-IMUT
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义tabbar 例子
09-24
自定义 TabbarController 例子
八、TabBar案例
qq_24790247的博客
09-14 87
TabBar案例 一、APP.vue中的样式引用 <style> @import "./assets/css/base.css" </style> base.css内容，无边框 bady { padding: 0; margin: 0; } 二、tabbar的高度为49px 三、js判断tabbar是不是被激活的状态 this.$route.path.indexOf(this.path) !== -1 四、 激活及激活后文字颜色的判定 通过父组件向子组件传递颜色参
小程序之寄快递底部TABBAR设计案例
一只小小鱼的博客
07-24 444
效果图：   1，app.js文件 App（{}）完成小程序注册。 2,建立pages目录，下再建index目录，jikuaidi目录，mine目录 3，目录下新建Componet 2，app.json文件 { “pages”:[ "pages/index/index", "pages/jikuaidi/jikuaidi", "pages/mine/mine"//完...
Tabbar案例
qq_44788119的博客
05-10 149
1:首先要进行组件的抽取 外面的组件tabbar <template> <div class="tabbar"> <tabbariterm path="/home" activeColor="red"> <img src="../../assets/github.png" style="width: 20px; height: 20px;" slot="text_image_active"/> <img src="../../asse
TabBar实例练习
weixin_44756893的博客
07-08 298
TabBar实例练习 1.新建一个vuecli2-tabbar实例 2.先搭建最基本的框架 主页文字包括：首页、分类、购物车、我的。这几个持水平分布 在App.vue文件中导入基本的组件： <template> <div id="app"> <div id="tab-bar"> <div class="tab-bar-item">首页</div> <div class="tab-bar-item">
利用原生Tabbar案例
04-05
原生的Tabbar通常具有扁平化的设计，每个item都是矩形，但在这个WKTabbar案例中，作者实现了中间item带有弧度的效果，这在视觉上更具吸引力。 要实现这种效果，开发者可能使用了自定义TabBar类，继承自UITabBar。在...
fengray.rar一个路由tabbar案例源码
09-04
一个路由tabbar案例源码一个路由tabbar案例源码一个路由tabbar案例源码一个路由tabbar案例源码
微信小程序多角色使用不同底层导航栏TabBar案例代码
10-31
一般可能会有不同的角色使用微信小程序，希望不同角色使用的底部导航栏项目不同...本项目案例主要模拟了两个角色进行登录，自定义微信小程序底部导航tabBar。由于微信小程序原生代码编写，使用的是微信开发者工具开发。
小程序tabbar素材
07-08
在微信小程序开发中，TabBar 是一个至关重要的组件，它位于小程序页面的底部，用于展示主要功能模块的快捷入口，通常包含2-5个图标和文字。本资源包"小程序tabbar素材"提供了专为微信小程序设计的TabBar图形元素，以...
小程序（三）配置tabbar及自定义tabbar样式
09-26
关于tabbar部分，官方文档是有明确的说明的，当然，我这里是不存在把官方文档给你复制一遍的情况。我大概把我再看官方文档过程中遇到的坑，大概复述一下。 一：配置tabbar 这个主要是使用小程序自带的tabbar，在...
tabbar购物车案例
weixin_59324977的博客
09-29 143
基本结构大致如下 组件拆分: MyHeader.vue – ==复用之前的== MyTabBar.vue – 底部导航 MyTable.vue – 封装表格 三个页面 -MyGoodsList.vue – 商品页 MyGoodsSearch.vue – 搜索页 -MyUserInfo.vue – 用户信息页 需要安装插件 less less-loader@5.0.0 -Dboots..
tabbar小案例实现
dandanmei0513的博客
07-14 370
tabBar小案例的完成 适合Vue.js入门新手
Vue-TabBar案例
wsssq_的博客
05-02 160
tabbar案例思路
【微信小程序】基础篇 -- 案例 - 自定义 tabBar（四十六）
JMFive的博客
03-20 1万+
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第46篇文章;今天开始学习微信小程序的第28天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。前面已经介绍了分包-独立分包 & 分包预下载，通过栗子学习了如何设置独立分包以及分包预下载。
320
计算机学习园
06-04 592
Thanks! I've tried doing this, but am having some issues. When I switch the datasource and call reloadData, I see the follow trace in the debugger: #0 0x93fa3688 in objc_msgSend #1 0x30bed381 i
[ 微信小程序 ] - 自定义tabBar（微信官方示例）
i_coffer的博客
02-01 884
该功能在小程序中应用场景多为根据不能角色来展示不同的tabBer, 解决方案可参考小程序官方 自定义tabBar: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html 注意：tabBer中不能使用分包路径，如果需要建议主包添加跳转路径 内容放分包中。 即（a页面放在主包 通过a页面跳转至分包页面 ） 1. 创建 在项目目录下新建custom-tab-bar文件夹，如何再文件夹中新建 .
2022年夏季《移动软件开发》实验报告
m0_53540438的博客
08-17 447
1、学习使用快速启动模板创建小程序的方法； 2、学习不使用模板手动创建小程序的方法。
【微信小程序开发】自定义tabBar案例（定制消息99+小红心）
计算机魔术师的blog
07-24 4759
我们可以自定义配置文件可以tarBar节点配置好完整属性，在创建自定义文件，编写代码，然后将我们刚刚配置的list节点放入的index.js的data中在index.wxml通过循环遍历改list数据实现效果，这种流程有几个好处在版本不兼容时等一些特殊情况，还是能基本显示效果，不用同时两处配置，在app.json节点配置list复制到index.js的datahttps。.........
微信小程序开发总结与心得(一)
热门推荐
qq_40126542的博客
02-25 5万+
Fundebug专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。 0 前言 最近的工作重心一直在小程序，也开发了几个小程序，对小程序开发的流程及相关技术相对比较熟悉，在开发过程中也总结了一些心得经验、了解一些小程序文档上没有的东西、踩了一些坑。所以想着写篇文章记录下来，并借此将小程序开发的...
Day06_动态组件_插槽_自定义指令_tabbar案例(1).pdf
最新发布
05-03
在Day06的学习中，主要关注了动态组件、插槽和自定义指令的应用，以及一个具体的TabBar案例开发。首先，我们回顾了组件的创建、注册和使用，强调了动态组件的概念，即在一个挂载点上动态地切换不同的组件。在实际...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值