一：会滑动的顶部tab选项卡

主要是在scroll-view设置scroll-x=“true”,然后在设置scroll-left（横向滚动条位置）为一定的数值，就可以了

不废话直接进入主题

test.wxml

1. <scroll-view class="tab-scoller " scroll-x="true" scroll-left="{{scrollLength}}">
2. <block wx:for="{{listTab}}" wx:key="code">
3. <view class="tab-view" data-index="{{index}}" id="{{item.code}}" bindtap="reflashData">
4. <text class="tab-text active" wx:if="{{index == curIndex}}">{{item.text}}</text>
5. <text class="tab-text" wx:else>{{item.text}}</text>
6.  
7. </view>
8. </block>
9. </scroll-view>
10. <view style="width:100%;heigth:100%;">
11. <text style="position:absolute;top:50%;left:40%; font-size:1.5rem">{{curText}}</text>
12. </view>

test.wxss

1. .tab-scoller {
2. background: linear-gradient(to bottom, #2262fc, rgba(57, 134, 222, 0.84));
3. height: 3rem;
4. white-space: nowrap;
5. display: flex;
6. }
7. /*取消移动条*/
8. ::-webkit-scrollbar {
9. width: 0;
10. height: 0;
11. color: transparent;
12. }
13.  
14. .active {
15. color: #000 !important;
16. background-color: #fff;
17. }
18.  
19. .tab-view {
20. text-align: center;
21. color: #fff;
22. font-size: 1rem;
23. height: 1.2rem;
24. width: 4rem;
25. margin-top: 1rem;
26. border-right: 1px solid #fff;
27. display: inline-block;
28. line-height: 1.2rem;
29. }
30.  
31. .tab-text {