微信小程序——-会滑动的顶部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)           })        }      }else{        if(that.data.scrollLength > 0){          this.setData({            scrollLength: that.data.scrollLength - 35 * (that.data.curIndex - index)          })        }      }      //移动view位置，改变选中颜色     this.initData(index)  },})