scroll-view滚动导航自动伪居中实现
注:每个选项卡固定宽度 官方文档中通过scroll-into-view可以控制scroll-view定点滚动 [代码]<[代码][代码]scroll-view[代码] [代码]class[代码][代码]=[代码][代码]"scroll-nav"[代码] [代码]scroll-x[代码][代码]=[代码][代码]"{{true}}"[代码] [代码]scroll-with-animation[代码][代码]=[代码][代码]"true"[代码] [代码]scroll-into-view[代码][代码]=[代码][代码]"item{{currentTab}}"[代码] [代码]scroll-left[代码][代码]=[代码][代码]"{{scrollLeftSys}}"[代码] [代码]bindscroll[代码][代码]=[代码][代码]"scrollNav"[代码][代码]>[代码] [代码] [代码][代码]<[代码][代码]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 [代码]<[代码][代码]scroll-view[代码] [代码]class[代码][代码]=[代码][代码]"scroll-nav"[代码] [代码]scroll-x[代码][代码]=[代码][代码]"{{true}}"[代码] [代码]scroll-with-animation[代码][代码]=[代码][代码]"true"[代码] [代码]scroll-into-view[代码][代码]=[代码][代码]"item{{currentTab < 4 ? 0 : currentTab - 3}}"[代码] [代码]scroll-left[代码][代码]=[代码][代码]"{{scrollLeftSys}}"[代码] [代码]bindscroll[代码][代码]=[代码][代码]"scrollNav"[代码][代码]>[代码] [图片]