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

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

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

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

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

环境：字节跳动开发者工具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.videoMenumenuList.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, // 设置滚动条距离左边的位置。

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