微信小程序——-会滑动的顶部tab选项卡

最新推荐文章于 2023-07-27 21:16:16 发布

oys1341

最新推荐文章于 2023-07-27 21:16:16 发布

阅读量6.2k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序微信

本文链接：https://blog.csdn.net/modingxiao/article/details/54694563

版权

微信小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

微信小程序——-会滑动的顶部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.js
Page({
  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)


  },
})