|
作者：oys1341，来自原文地址 一：会滑动的顶部tab选项卡主要是在scroll-view设置scroll-x=“true”,然后在设置scroll-left（横向滚动条位置）为一定的数值，就可以了 不废话直接进入主题 
test.wxml <scroll-view class="tab-scoller " scroll-x="true" scroll-left="{{scrollLength}}"> <block wx:for="{{listTab}}" wx:key="code"> <view class="tab-view" data-index="{{index}}" id="{{item.code}}" bindtap="reflashData"> <text class="tab-text active" wx:if="{{index == curIndex}}">{{item.text}}</text> <text class="tab-text" wx:else>{{item.text}}</text> </view> </block></scroll-view> <view style="width:100%;heigth:100%;"> <text style="position:absolute;top:50%;left:40%; font-size:1.5rem">{{curText}}</text></view>
test.wxss .tab-scoller { background: linear-gradient(to bottom, #2262fc, rgba(57, 134, 222, 0.84)); height: 3rem; white-space: nowrap; display: flex;}/*取消移动条*/::-webkit-scrollbar { width: 0; height: 0; color: transparent;}.active { color: #000 !important; background-color: #fff;}.tab-view { text-align: center; color: #fff; font-size: 1rem; height: 1.2rem; width: 4rem; margin-top: 1rem; border-right: 1px solid #fff; display: inline-block; line-height: 1.2rem;}.tab-text { display: block; bottom: 0.4rem; position: relative; height: 1.5rem; margin: 0 5%; border-radius: 0.5rem; padding: 0.3rem 0.2rem 0; color: #fff;}
test.js // pages/more/test.jsPage({ data: { listTab:[ {"code":"01","text":"tab1"}, {"code":"02","text":"tab2"}, {"code":"03","text":"tab3"}, {"code":"04","text":"tab4"}, {"code":"05","text":"tab5"}, {"code":"06","text":"tab6"}, {"code":"07","text":"tab7"} ], curIndex:0, curText:null, scrollLength: 0 }, onLoad: function () { console.log('onLoad') this.initData(0) }, //初始化数据 initData:function(index){ var that = this this.setData({ curIndex:index, curText:that.data.listTab[index].text, }) }, //tab点击事件，刷新数据 reflashData:function(event){ var that = this var index = event.currentTarget.dataset.index //移动滚动条,//200和35是我估算的 if(index > this.data.curIndex ){ if(that.data.scrollLength < 200){ this.setData({ scrollLength: that.data.scrollLength + 35 * (index - that.data.curIndex)
邀请
| 
