原生小程序封装菜单栏（Tabs）组件 可横向滚动，选中当前菜单居中，可以自行更换颜色

前言： 因为工作中要用到这个Tabs组件，且多个页面都要用到，所以为了方便就直接封装了一个，也是为了记录一下工作中用的比较多东西

第一步 直接上（html代码）

<view class="tabsBox" style="background:{{bgVal}};">
    <scroll-view scroll-x="true" scroll-with-animation="true" scroll-into-view="nav-{{select > 0 ? select -1 : select}}">
      <view wx:for="{{sortList}}" wx:for-index="index" wx:key="index" id="nav-{{index+1}}"
       class="sort" style="color:{{index == select ?colorVal: ''}}" data-index='{{index}}' data-id="{{item.id}}" bindtap="getSelect">
        {{item.name}}
        <view class="line" wx:if="{{index == select}}" style="background:{{colorVal}};"></view>
      </view>
    </scroll-view>
  </view>

第二步 直接上（js代码）

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 菜单数据
    sortList:{
      type:Array,
      value:null,
    },
    // 当前选中字体颜色和横线颜色-默认蓝色可自行修改，也可以传入修改,
    colorVal:{
      type:String,
      value:'#6aa6ff'
    },
    //菜单背景颜色-默认白色可自行修改-也可以传入修改
    bgVal:{
      type:String,
      value:'#fff'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    select: 0,
    
  },

  /**
   * 组件的方法列表
   */
  methods: {
//选中导航的方法
  getSelect(e) {
    var index = e.currentTarget.dataset.index
    this.setData({
      select: index
    })
  },
  }
})

第三步（css代码）

.tabsBox {
  position: sticky;
  top: 0;
  width: 100%;
  height: 80rpx;
  white-space: nowrap;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  box-sizing: border-box;
}
.tabsBox scroll-view {
  height: 100%;
}

.sort {
  position: relative;
  display: inline-block;
  font-size: 32rpx;
  margin-right: 70rpx;
  line-height: 80rpx;
  height: 100%;
}

scroll-view .sort:last-child {
  margin-right: 0rpx;
}

.line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5rpx;
  border-radius: 10rpx;
  animation: spread .5s;
}

@keyframes spread {
  0% {
    width: 0;
    left: 50%;
  }

  100% {
    width: 100%;
    left: 0;
  }
}

组件的封装已经完成了，接下来就是引入到页面使用

第四步（页面使用）

（1）首先在使用页面的json中加入路径,自行更改

 "tabs":"/utils/component/tabs/tabs",

（2）在页面添加组件-都有默认颜色，不更改可以不传，修改就可以按照下面的方式传值或者更改默认值。

   <tabs sortList="{{菜单数据}}" bgVal="背景颜色"  colorVal="字体和下划线颜色"></tabs>

效果

结尾：封装和应用都做完了，直接复制代码可以使用。有什么不足的地方请大家提出来。