微信小程序_点击二级导航条切换页面

gif如下，黄色部分是不可以滑动的，蓝色部分可以滑动：

代码解说：

首先我在js自定义了navState参数用于判断导航的当前状态，
定义了data-index用于js中动态修改导航的当前状态，
nav-switch-style为选择导航条时的样式，
不可滑动视图切换很简单，用wx:if判断状态显示相应页就好了，
滑动页视图切换要用到swiper和 swiper-item，
用bindchang方法监听滑块，current 改变时会触发 change 事件
（还有个bindanimationfinish方法监听也是可以用的，详细请看官方文档）
动态的绑定了current滑块的index，这样就可以实现点击导航条滑块跟着滚动，
相反的，当滑动滑块时，就可以根据current的值来动态修改导航的状态了。
wxml代码：

<!-- 导航条 -->
<view class="nav">
  <view bindtap="navSwitch" data-index="0" class="{
  {navState==0 ? 'nav-switch-style':''}}">页面一<