首先在JS里任意定义一个banner数据
banner: [
{ “name”: “第一个”, “id”: ‘0’ },
{ “name”: “第二个”, “id”: ‘1’ },
{ “name”: “第三个”, “id”: ‘2’ },
{ “name”: “第四个”, “id”: ‘3’ },
{ “name”: “第五个”, “id”: ‘4’ },
{ “name”: “第六个”, “id”: ‘5’ },
{ “name”: “第七个”, “id”: ‘6’ },
{ “name”: “第八个”, “id”: ‘7’ },
{ “name”: “第九个”, “id”: ‘8’ }
]

然后HTML 元素
<scroll-view class=‘banner’ scroll-x scroll-left="{{scrollLeft}}" scroll-with-animation=’{{true}}’>
<view class=‘banner-li {{num==index?“active”:""}}’ wx:for=’{{banner}}’ wx:key=’{{index}}’ data-num="{{index}}" data-id=’{{item.id}}’ bindtap=“bannerTap”>{{item.name}}</view>
</scroll-view>

样式走起来

.banner{
display: flex;
white-space: nowrap;
height: 80rpx;
margin-top: 20rpx;
}
.banner .banner-li{
display: inline-block;
line-height: 80rpx;
padding: 0 20rpx;
margin-left: 10rpx;
font-size: 36rpx;
color: #909090;
}
.banner .active{
color: #000;
font-size: 50rpx;
}
这个时候就是这样的了

然后就是bannerTap点击之后的事件
bannerTap: function (e) {
if (e.currentTarget.offsetLeft > 187.5) {
this.setData({
scrollLeft: e.currentTarget.offsetLeft - 150,
num: e.currentTarget.dataset.num,
id: e.currentTarget.dataset.id,
});
} else {
this.setData({
scrollLeft: e.currentTarget.offsetLeft - 140,
num: e.currentTarget.dataset.num,
id: e.currentTarget.dataset.id,
});
};
},

点击事件 设置scroll-left 偏移距离

PS：这个距离我是根据banner内容算出来的 不能做到动态居中，
如果大大们有更好的方案，求鞭策