微信小程序tab切换，可滑动切换，导航栏跟随滚动实现

微信小程序tab切换，可滑动切换，导航栏跟随滚动实现
简介

看到今日头条小程序页面可以滑动切换，而且tab导航条也会跟着滚动，点击tab导航，页面滑动，切导航栏也会跟着滚动，就想着要怎么实现这个功能

像商城类商品类目如果做成左右滑动切换类目用户体验应该会好很多，我这里只是一个小demo，没有怎么去考虑数据的问题，主要是想着去实现这么个功能，有可能后期引入数据后会出现问题，欢迎提出互相讨论

解决过程

1.在想要实现这个问题的时候找了不少别人的博客看，主体页面布局方面是比较统一的，tab导航栏使用标签，内容使用，其中的使用方法和参数希望自行参考api文档，不过多解释

布局代码如下：

wxml

复制代码






{ {navItem.text}}





{ {tabItem}}



复制代码

wxss

复制代码
/index.wxss/
page{
width: 100%;
height: 100%;
}
.container{
width: 100%;
height: 100%;
}
.nav {
height: 80rpx;
width: 100%;
box-sizing: border-box;
overflow: hidden;
line-heig