微信小程序?qū)崿F(xiàn)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: "插畫藝術(shù)"
      },
      {
        title: "工藝作品"
      },
      {
        title: "服裝藝術(shù)"
      },
      {
        title: "三維建模"
      },
    ],
    tabContent: [
      {
       title: "臺(tái)燈臥室床頭 簡約現(xiàn)代書房 北歐宜家創(chuàng)意裝飾個(gè)性圓球臺(tái)燈床頭燈",
       text: "臺(tái)燈",
       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
  },
  // 事件處理函數(shù)
  onLoad: function() {
    // 控制record-box隨鼠標(biāo)切換調(diào)整位置
    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
        })
      }
    })
  },
  // 滑動(dòng)事件
  // 點(diǎn)擊標(biāo)題切換當(dāng)前頁時(shí)改變樣式
  switchNav(event) {
    var cur = event.currentTarget.dataset.current;
    if (this.data.currentTab == cur) {
      return false;
    } else {
      this.setData({
        currentTab: cur
      })
    }
  },
  // 滾動(dòng)切換標(biāo)簽樣式 
  switchTab(event) {
    var cur = evnet.detail.current;
    var singeNavWidth = this.data.windowWidth / 5;
    this.setData({
      currentTab: cur,
      navScrollLeft: (cur - 2) * singleNavWidth
    });
  }
})