微信小程序实现tab左右切换效果

<view class="record-box">  <view class="nav">    <scroll-view scroll-x="true" class="navbar-box" srcoll-left="{{navScrollLeft}}"      srcoll-width-animation="{{true}}">      <block wx:for="{{recordMain}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">        <view class="nav-item {{currentTab == idx ? 'text' : ''}}" data-current="{{idx}}"           bindtap="switchNav">          <label>{{navItem.text}}</label>        </view>      </block>    </scroll-view>  </view></view>------------------------------------------------<view class="record-ft">  <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">    <swiper-item wx:for="{{[0,1,2,3]}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx"       class="tab-cnetent">        <block wx:for="{{tabContent}}" wx:for-item="tabItem" wx:key=" ">          <view class="padding-box" bindtap="navigateUrl" data-url="/pages/index/index">            <view class="weui-list-box weui-main">              <view class="weui-list-bd">                <view class="img-box">                  <image src="{{tabItem}}" class="img" mode="widthFix"></image>                </view>              </view>              <view class="weui-list-ft">                <view class="weui-title">                  <view class="text-flow clamp-xs font-sm">{{tabItem.title}}</view>                  <view class="text">                    <laber>{{tabItem.text}}</laber>                    <laber>{{tabItem.text}}</laber>                  </view>                </view>                <view class="weui-cost">                  <view>￥<laber>{{tanItem.cost}}</laber></view>                </view>              </view>            </view>          </view>        </block>    </swiper-item>  </swiper></view>

Page ({  const app = getApp()  data: {    recordMian: [      {        title: "插画艺术"      },      {        title: "工艺作品"      },      {        title: "服装艺术"      },      {        title: "三维建模"      },    ],    tabContent: [      {       title: "台灯卧室床头 简约现代书房 北欧宜家创意装饰个性圆球台灯床头灯",       text: "台灯",       cost: "1255",       imgUrl: "http://img.weiye.me/zcimgdir/album/file_59b8f7b66ba7f.jpg",      },      {       title: "雪域冰雪天地8寸牛乳芝士蛋糕",       text: "蛋糕",       cost: "15",       imgUrl: "http://img.weiye.me/zcimgdir/album/file_59b8f7b66ba7f.jpg",      },    ],    currentTab: 0,    navScrollLeft: 0  },  // 事件处理函数  onLoad: function() {    // 控制record-box随鼠标切换调整位置    if (app.globalData.userInfo) {      this.setData({        userInfo: app.globalData.userInfo,        hasUserInfo: true      })     } else if (this.data.canIUse) {        app.userInfoReadyCallback = res => {          this.setData({            userInfo: res.userInfo,            hasUserInfo: true          })        }      }    else {      wx.getUserInfo({        success: res => {          app.globalData.userInfo = res.userInfo          this.setData({            userInfo: res.userInfo,            hasUserInfo: true          })        }      })    }    wx.getSystemInfo({      success: (res) => {        this.setData({          pixelRatio: res.pixelRatio,          windowHeight: res.windowHeight,          windowWidth: res.windowWidth        })      }    })  },  // 滑动事件  // 点击标题切换当前页时改变样式  switchNav(event) {    var cur = event.currentTarget.dataset.current;    if (this.data.currentTab == cur) {      return false;    } else {      this.setData({        currentTab: cur      })    }  },  // 滚动切换标签样式   switchTab(event) {    var cur = evnet.detail.current;    var singeNavWidth = this.data.windowWidth / 5;    this.setData({      currentTab: cur,      navScrollLeft: (cur - 2) * singleNavWidth    });  }})