一个小demo -- tabbar

最新推荐文章于 2023-12-21 14:28:05 发布

原创最新推荐文章于 2023-12-21 14:28:05 发布

· 221 阅读

2 ·

版权

Vue 专栏收录该内容

15 篇文章

订阅专栏

在淘宝这样的移动端app，我们在其主页一般都会看到类似的底部导航
在这里插入图片描述
这个就是tabbar

我以后准备写的第一个项目也要用到它，所以准备现在就来封装这样一个tabbar

效果图

在这里插入图片描述
算是为以后的项目搭了个简单的框架，点击tabbar中的每一项，可跳转到具体的页面。

大致思路

既然是做tabbar，那肯定要有TabBar这样一个组件，TabBar里面的每一项肯定又是个组件TabBarItem
TabBar肯定不是写死的，它里面有几个TabBarItem是由用这个组件的人决定的，所以TabBar模板里面肯定要写个插槽
我们发现TabBarItem里面有两个部分，一个是图片和图片下的字。这两个东西肯定不是写死的，所以肯定要使用两个具名插槽。而且图片的样式随着点击会改变，所以应该是两个图片，使用v-if,v-else切换，字体样式呢就用绑定的class属性切换。总的来说，TabBarItem要使用三个具名插槽。
我们还要实现点击每个item会跳转到其对应的页面，那肯定要用路由了。将路由中路径和组件的映射写好，实现路由跳转不想用网页返回的话可以用this.$router.replace()，而且replace中要写的路径肯定也不是写死的，是要通过props传入的。
页面跳转写好了，别忘了，还有点击的item的图片改变和字的样式的改变。以前我们是会直接操作dom，现在可以用路由了。处于活跃状态的路由肯定样式和其他不活跃的是不一样的，所以可以将 this.$route.path 和通过props拿到的 this.path 作比较，就可实现活跃的路由样式改变了

computed: {
  isActive() {
    return this.$route.path !== this.path
  }
}

还有一个问题，还记得我们的item中文字的样式是写死的吗？当开发人员更换图片时，文字的颜色当然就不能写死了。所以要从组件外接收一个activeColor，绑定文字的style属性

<div :style="activeStyle"><slot name="item-text"></slot></div>

用一个计算属性activeStyle来控制颜色

activeStyle() {
  return this.isActive ? {} : {color: this.activeColor}
}

我们这个组件要实现的功能已经实现完了，但是当别人用这个组件的时候，为组件自定义内容的时候写的东西全写到App.vue中了。但我们的App.vue以后还要写其他东西的，除了tabbar的东西当然还要写页面的东西啊等等，所以我们要把和tabbar相关的东西都抽到MainTabBar这个组件中，App.vue引用这个组件即可。（不过别忘了修改MainTabBar中几个图片的路径、引用TabBar的路径和引用TabBarItem的路径）

需要注意的点

用v-if和v-else时，v-if一定在前面

<!-- v-if一定要放在v-else前面 -->
<div v-if="isActive"><slot name="item-img"></slot></div>
<div v-else><slot name="item-img-active"></slot></div>

懒加载的箭头函数不能加大括号

// 懒加载
const Home = () => import('../views/home/Home')
const Category = () => import('../views/category/Category')
const Shopcart = () => import('../views/shopcart/Shopcart')
const Profile = () => import('../views/profile/Profile')