本文探讨了如何封装一个高度可定制的TabBar组件，包括使用插槽实现内容动态插入，通过props传递点击事件及链接，确保组件的灵活性。通过设置图片和文字插槽，允许外部自由配置TabBarItem。同时，介绍了组件抽离策略，避免TabBar内部逻辑复杂化，保持组件的单一职责。此外，提到了CSS动态引入、Flex布局以及阴影过渡效果的应用，以提升用户体验。
封装成一个独立的组件：
1 2 3 4 5
- 封装的组件要足够的灵活
- 插槽，让外界决定只能往里面插入几个东西
- 创建4个TabbarItem
- 这个组件里面又可以定义图片的插槽，和文字的插槽，从而所有的东西都不是写死的。
- 小的Item里面定义props属性，props里面定义别人传过来的一些值，
- props { link: } 点击item动态的跳转到某一个item里面，动态的帮你进行相关的跳转。组件封装的思想。大的组件放小的组件就好了。
- tab-bar的高度一般是49px
- @import做css文件的动态引入。
- flex布局
10.阴影过渡—box-shadow属性 - tabBar放置一个插槽，原因呢是为了不让tabBar的逻过于复杂。
- 抽离出来，tabBar里面只关注于tabBar自己的东西，item组件不应该交给它管理，原因是因为item组件的逻辑乱七八糟的。
- 为了不让TabBar的逻辑过于复杂，我们把tabBar抽离出来tabBarItem。
- tabBarItem动态变化，放置插槽。
- 动态往组件里面插入东西。让外界动态的往组件里面插入东西，完成tabBar的基本封装。
-
<img src="" alt=""> -
<div></div>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
