小程序tav切换效果

wxml:

<scroll-view scroll-x="true" class="pageList" scroll-with-animation="true" scroll-left="{{scrollLeft}}">
 　　<view class="pageLi {{index==currentTab?'active':''}}" data-id="{{index}}" wx:for='{{10}}' bindtap="swichNav">切换</view>

</scroll-view>

wxss:

.pageList{white-space: nowrap;}
.pageLi{display: inline-block;line-height: 100rpx;margin: 0 30rpx;}
.pageLi.active{color: #f00;}

wxjs：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    num:false
  },
  swichNav: function (e) {    
    let datasetId = e.currentTarget.dataset.id
    this.setData({
      currentTab: datasetId
    })


    this.checkCor();
  },
  //判断当前滚动超过一屏时，设置tab标题滚动条。
  checkCor: function () {
    if (this.data.currentTab > 3) {
      this.setData({
        scrollLeft: 300
      })
    } else {
      this.setData({
        scrollLeft: 0
      })
    }
  },