微信小程序 导航tabBar切换 滑动效果

.wxml

<!-- nav导航 -->
<view class="goods">
  <block wx:for="{{tab}}" wx:key="key">
    <view class="{{item.style}}" bindtap="tarClick" data-index="{{index}}">{{item.titcle}}</view>
  </block>
</view>
<!--导航下  视图滑块 -->
<swiper bind:change="changeTab" current="{{index}}">
   <block>
     <swiper-item>
     <text>11111</text>
     </swiper-item>
     <swiper-item>
     <text>2222</text>
     </swiper-item>
     <swiper-item>
     <text>3333</text>
     </swiper-item>
   </block>
</swiper>

.wxss

/* pages/details/details.wxss */
.goods{
    width: 100%;
    height: 100rpx;
    /* background-color:yellowgreen; */
    display:flex;
    justify-content: space-around;
    align-items: center;
 
}
.goods view{
    width: 160rpx;
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.color{
    color: red;
    border-bottom: 2px solid red;
}

.js

// pages/details/details.js
Page({
    data: {
       tab:[
         {titcle:"商品参数",style:"color"}, 
         {titcle:"商品介绍",style:""},
         {titcle:"商品规格",style:""},
        ],
        index:0,
       goods:''
    },
      //点击tabBar
       tarClick(e){
          //  console.log(e.currentTarget.dataset.index)
           let tab = this.data.tab;
          let that = this;
          let index = e.currentTarget.dataset.index
           console.log(index)
          tab.map((item,key)=>{
           if(key==index)
           {
              tab[key]['style']='color';
           }else{
             tab[key]['style']='';
           }
          })
          that.setData({tab,index})
       
       },//视图滑块滑动触发
       changeTab(e){
          console.log(e.detail.current)
          let tab = this.data.tab;
          let that = this;
          let index = e.detail.current
           console.log(index)
          tab.map((item,key)=>{
           if(key==index)
           {
              tab[key]['style']='color';
           }else{
             tab[key]['style']='';
           }
          })
          that.setData({tab,index})
       },
})