tabs 标签页

<scroll-view scroll-x="true" class="scroll-view-x" scroll-left="{{scrollleft}}" scroll-with-animation>
    <view class="scroll-view-item" wx:for="{{tabData}}" wx:key="index">
        <view class="tabitem {{item.isActive ? 'Active' : ''}}" bindtap="tapscrollitem" data-id="{{index}}">{{item.name }}</view>
    </view>
</scroll-view>

data:{
           scrollleft:0,
    tabData: [{
      id: 0,
      name: "首页",
      isActive: true,
    }, {
      id: 1,
      name: "原创",
      isActive: false
    }, {
      id: 2,
      name: "分类",
      isActive: false
    }, {
      id: 3,
      name: "关于",
      isActive: false
    }, {
      id: 4,
      name: "送蛋糕",
      isActive: false
    }, {
      id: 5,
      name: "都是废话",
      isActive: false
    }, {
      id: 6,
      name: "设置",
      isActive: false
    }, {
      id: 7,
      name: "个人中心",
      isActive: false
    }]     
    
},
  tapscrollitem(e){
    let id = e.currentTarget.dataset.id
    console.log(id);
    let arr = this.data.tabData
    for (let i = 0; i < arr.length; i++) {
      if (id==arr[i].id) {
        arr[i].isActive = true
        this.setData({
          tabData:arr
        })
      }else{
        arr[i].isActive = false
        this.setData({
          tabData:arr
        })
      }
      if (id>2) {
        this.setData({
          scrollleft:(id-2)*70
        })
      }else{
        this.setData({
          scrollleft:0
        })
      }
    }
  },

　　

.scroll-view-x{
	background-color: #fff;
	white-space: nowrap;
  }
.scroll-view-item{
	display:inline-block;
	margin:20rpx 10rpx;
  }
.tabitem{
	padding: 10rpx 30rpx; 
	border-radius: 10rpx;
	background-color: #f1f1f1;
	color: #252525;
}
.Active{
	background-color: #5d90fd;
	color: #fff;
}