Tabbar案例
1、TabBar实现思路
(1)如果在下方有一个单独的TabBar组件,如何封装?
- 自定义TabBar组件,在APP中使用
- 让TabBar出于底部,并且设置相关的样式
(2)TabBar中显示的内容由外界决定
- 定义插槽
- flex布局平分TabBar
(3) 自定义TabBarItem,可以传入 图片和文字
- 定义TabBarItem,并且定义两个插槽:图片、文字。
- 给两个插槽外层包装div,用于设置样式。
- 填充插槽,实现底部TabBar的效果
(4)传入 高亮图片
- 定义另外一个插槽,插入active-icon的数据
- 定义一个变量isActive,通过v-show来决定是否显示对应的icon
(5)TabBarItem绑定路由数据(若已用脚手架安装过路由,下面的手动安装路由步骤可省)
- 安装路由:npm install vue-router —save
- 完成router/index.js的内容,以及创建对应的组件
- main.js中注册router
- APP中加入组件
(6)点击item跳转到对应路由,并且动态决定isActive
- 监听item的点击,通过this.$router.replace()替换路由路径
- 通过this.$route.path.indexOf(this.link) !== -1来判断是否是active
(7)动态计算active样式
封装新的计算属性:this.isActive ? {‘color’: ‘red’} : {}
最终效果:
2、tabbar-实现流程
(1)基本的项目搭建
首先用vue init webpack tabbar创建一个项目
(2)然后在App.vue里面添加一下代码,就是加上要显示的内容和样式
得到一个模板样式:
(3)进一步优化
如果这么写的话,这段代码复用性很差,因为tabbar在很多页面会使用,因此将其抽离成一个组件。
最终的代码请看:
补充:
我们可以看到这一串代码的路径非常长,看起来很乱,有没有简便的写法呢?有,就是前面讲到的起别名
像这样子给路径起个别名,到时候只需按照你起的别名进行引用路径即可(如下图所示)。但是,在import中引用时可直接引用,但是在src里面时,因为是DOM的相关操作,所以要记得在路径前面添加~。注意:在vuecli3才可以直接在alias的其他别名的路径那使用@,vuecli2还是要自己写:
上图这是在用别名引用路径,可以通过和下面的路径进行对比,看起来舒服服多了。
结果还是能正常显示。