注意里面的 scroll-into-view=“{{scrollId}}” 和 id=“scrollView{{index}}” 属性。
当scrollId和scroll-view 组件中元素的id相同时 界面将自动滚动到此位置
<scroll-view scroll-x class="list-label" scroll-into-view="{{scrollId}}" scroll-with-animation="true"> <view class="label-li {{scrollId=='scrollView'+index?'course-active':''}}" wx:for="{{navList1}}" data-navid="{{index}}" id="scrollView{{index}}" catchtap="navClick1">{{item}}view>scroll-view>
data:{// 课程一级标签 navList1:['全部','一级标签1','一级标签2','一级标签3','一级标签4','一级标签5','一级标签6','一级标签7'], navId1:0, scrollId:'scrollView3',},
.list-label{ margin: 0 30rpx; width: 720rpx; display: flex; margin-bottom: 8rpx; overflow-x: scroll; white-space: nowrap;}.label-li{ margin-right: 24rpx; background: #F5F5F5; color: #808080; padding: 10rpx 24rpx; border-radius: 6rpx; white-space: nowrap; display: inline-block; font-size: 24rpx; font-family: PingFang SC-Medium, PingFang SC; font-weight: 500; line-height: 28rpx;}.course-active{ background: #363940 !important; color: #fff !important;}
来源地址:https://blog.csdn.net/BubbleABC/article/details/129593024