uniapp使用scroll-view与swiper制作顶部导航栏

使用scroll-view 与 swiper制作顶部导航  复制即可用

图：

代码：

注意：代码现在还有一点小问题   在左右滑动时   @change事件访问不到data里面的数据   所以滑动时顶部切换直接用的数字，上面代码里面也有备注   css用的是scss 

 

切换原理     scroll-view  主要是动态改变   scroll-left      swiper主要是动态改变  current 的值     可以设置一个初始默认值    current：0        scroll-view点击事件改变current  切换swiper        swiper的@change事件  改变scroll-view的scroll-left 

看看代码应该好理解   再次强调  此代码有小问题    需要自己重新计算 scroll-view 的大小   

再提一点   获取元素宽高时需要异步   这里我采用的方法是使用定时器。