第一部分:swiper + 顶部/底部导航栏实现
这里的思想与安卓的fragment+viewpager是很类似的,用swiper作为左右滚动区间,联动tab导航栏,中间展示内容组件化
![](https://img-blog.csdnimg.cn/img_convert/68be392dfe7c5ef44d1873a7444b1d6d.webp?x-oss-process=image/format,png)
整体布局
导航栏部分大家可以自定义,我整个界面采用的是底部导航栏用position:fixed浮动,swiper部分的current注意是与tab的下标一致,并且注意swiper的高度一定要动态自适应,这个等下滑动冲突会讲到。swiper-item内部内容是抽成组件化了,这样代码看着更整洁规范,注意内部class一定要写。