小程序自定义导航栏滑动和不滑动

 可滑动导航栏！

1.我使用的是view加上轮播图，为什么我们点击导航下面的页面就会发生改变？为什么滑动页面导航栏也会发生改变呢？其实它的关键就是用一个值将它们联系起来。我自己定义了一个currenttab.

    ①使用data-current绑定值监听值的变化当值发生改变时，导航栏就改变。我们绑定点击事件swichnav.这样你点击导航栏，导航栏就会在你点击的那里。

  swichNav(e){
        console.log(e.target.dataset.current);
          this.currenttab=e.target.dataset.current
      },

 ②但是你滑动页面没有发生改变啊。因为轮播图没有监听变化啊。所以先使用:current="currenttab"绑定值（表示当前页面的值）。在绑定change事件switchtab.让轮播图监听的值等于上面导航的值。

   switchTab(e){
        console.log(e);
        this.currenttab=e.detail.current
      },

 所有代码

<view class="tab">
          <view :class="['tab-item' ,currenttab==0 ? 'active' : '']" data-current="0" @click="swichNav">游记</view>
          <view :class="['tab-item' ,currenttab==1 ? 'active' : '']" data-current="1" @click="swichNav">粉丝</view>
          <view :class="['tab-item' ,currenttab==2 ? 'active' : '']" data-current="2" @click="swichNav">收藏</view>
      </view>
     <swiper :duration="1000" :current="currenttab" @change="switchTab">
       <swiper-item>
         <view class="swiper-item">1</view>
       </swiper-item>
       <swiper-item>
         <view class="swiper-item">2</view>
       </swiper-item>
       <swiper-item>
         <view class="swiper-item">3</view>
       </swiper-item>
     </swiper>

不滑动只点击

他们之间的区别是只用监听导航栏的变化，故只需要导航栏绑定点击事件就可以。

<view :class="['left', current==1?'select':'']" @change="swithNav" data-code="1">
                 <text>登录</text>
               </view>
               <view :class="['right', current==0?'select':'']" @change="swithNav" data-code="0">
                 <text>注册</text>
               </view>

 <view class="input-box" :hidden="current==0">
                  
  </view>
             <!-- 注册 -->
 <view class="input-box" :hidden="current==1">
        </view>