字节（抖音）小程序，菜单栏点击后自动滚动居中

遇事不决先搜索，搜出一小队文章，并在里面刨了半天后，开始动手，从别人文章借鉴（抄袭）的代码，修改半天还是实现不了，而且无用代码一大堆，无奈只能把官方的例子拉到开发者工具里面，写一个简单的用例，再将他应用到我的小程序里面，最后发现居然如此简单。。。

废话说够了，先上效果图：

环境：字节跳动开发者工具v3.3.8

设备：模拟器 iPhone6/7/8/SE

具体实现代码：

.ttml文件，video是自己的菜单列表

<scroll-view class="rank" scroll-x="true" style="width: 100%" scroll-left="{{scroll_left}}" scroll-with-animation="true">
        <view class="{{nowMenuIndex == index?'rankTrue':''}}" tt:for="{{videoMenu}}" tt:for-item="item" bindtap="menuChange" data-index="{{index}}" data-id="{{item.id}}">{{item.name}}</view>
</scroll-view>    

.ttss文件

.rank{
    margin: 10px auto;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    overflow-x: scroll;
}

.rank view{
    display: inline-block;
    width: 200rpx;
    background-color: #343740;
    border-radius: 0px;
    font-size: 35rpx;
    font-weight: 600;
    color: #EBE7ED;
    padding: 8px 0;
    margin-right: 1px;
}
.rankTrue{
    background-color: #343740; 
    border: 1px solid #5E5E68; 
    padding: -1px
}

.js文件

 menuChange(e){
    this.setData({nowMenuIndex: e.currentTarget.dataset.index})
    this.setData({
      category: e.currentTarget.dataset.id,
    })
    var menuList = this.data.videoMenu
    menuList.forEach((item, index) => {
      if (item.id === this.data.category) {
        this.setData({
          scroll_left: 100 * index-135
        })
      }
    })
},

 菜单列表数据（在data里面），例子（实际开发中是从接口获取的）：

menu:[
      {id:1,name:"111"},
      {id:2,name:"222"},
      {id:3,name:"333"},
      {id:4,name:"444"},
      {id:5,name:"555"},
      {id:6,name:"666"},
    ]

所需变量（在data里面）：

videoMenu: "", //菜单
category: 1, //分类，我这里默认选中菜单1
scroll_left: 0, // 设置滚动条距离左边的位置。

 如果对你产生了帮助，点赞收藏，下次翻看不迷路