微信小程序多tab标签切换并自动居中效果

顶部菜单实现多标签切换，被点击的标签选中并移动到屏幕中间，哇听起来就很炫酷，不是简单的显示隐藏，还带了移动的效果！怎么实现呢？

1.html布局

<scroll-view scroll-x class="tab-nav"  scroll-with-animation scroll-left="{{scrollLeft}}">
      <block wx:for="{{indexTabs}}" wx:key="index">
        <view class="tab-item {{item.id==tabCur?'cur':''}}"  bindtap="tagSelect"  data-id="{{item.id}}" data-index="{{index}}">
          {{item.name}}
        </view>
      </block>
 </scroll-view>

2.css

.tab-nav {
  white-space: nowrap; 
  padding:18rpx 0 10rpx 0;height:70rpx;zoom:1;
}

.tab-nav .tab-item {
  height: 80rpx;
  display: inline-block;
  line-height: 70rpx;
  margin: 0 25rpx;
  padding: 0 10rpx;
  font-size: 26rpx;
  color: #333333;
  opacity: 0.8;
}
.tab-nav .tab-item.cur{
  font-size: 32rpx !important;
  font-weight: 500;
  opacity: 1;
  color: #333;
}

3.js

Page({
  data: {
    indexTabs:[
      {id:0,name:"福利"},
      {id:1,name:"关注"},
      {id:2,name:"推荐"},
      {id:3,name:"政策解读"},
      {id:4,name:"圈子"},
      {id:5,name:"视频"},
      {id:6,name:"纠错站"}
    ],
    tabCur: 0,
    scrollLeft: 0,
  },
  tagSelect(e) {
    this.setData({
      tabCur: e.currentTarget.dataset.id,
      scrollLeft: e.currentTarget.offsetLeft - 165,
    })
  },
})

关于移动位置，可以自行调整，因为你标签的长度不定，字体大小都会印象是不是居中的效果，如果子标签的宽度一样，可以试试下面的这个方法：

<scroll-view scroll-x scroll-left="{{scrollLeft}}" scroll-with-animation class="scroll-view">
 <view class="class-item" wx:for="{{classList}}" wx:key="id" bindtap="switchClass">
  <text class="name">{{item.className}}</text>
 </view>
</scroll-view>
onReady(){
 wx.createSelectorQuery().select('.scroll-view').boundingClientRect((rect)=>{
  this.data.scrollViewWidth = Math.round(rect.width)
 }).exec()
},
switchClass(){
 let offsetLeft = e.currentTarget.offsetLeft
 this.setData({
  scrollLeft: offsetLeft - this.data.scrollViewWidth/2
 })
}

他这个方法是在onReady里面动态计算整个移动区域的宽度，然后用被点击元素的offsetLeft偏移量减去一半的屏幕宽度就是动态菜单移动需要的位置！

都可以实现效果，我还是习惯第一种，毕竟是我实战总结经常用的方法，哈哈！