注：每个选项卡固定宽度
官方文档中通过scroll-into-view可以控制scroll-view定点滚动
<view class="scroll-nav-item {{currentTab == index ? 'scroll-nav-item-active' : ''}}" id="item{{index}}" wx:for="{{[1,2,3,4,5,6,7,8,9]}}" data-index="{{index}}" bindtap="clickNav">标题{{item}}</view></scroll-view> |
clickNav(e){ this.setData({ currentTab: e.currentTarget.dataset.index })} |
效果如下
缺点就是从后往前点的时候，到第3个就没法继续点了，需要主动滑动scroll-view才能点到前面几个选项卡。
实现伪居中：
让点击前四个的时候scroll-view不滚动，即currentTab保持为0
在点击第5个的时候，屏幕内最左测是第2个，相差3个，后面的选项卡依此类推都减3
|
mark