uniapp 实现左右切换tab

概要

要实现左右切换tab我们可以用uni-app提供的内置组件来实现

scroll-view

代码实现

 <scroll-view class="main-tabs" scroll-x scroll-with-animation :scroll-into-view="scrollIntoView">
      <view
         class="main-tabs-item"
         v-for="(item, index) in tabList"
         :key="item.id"
         @click="changeTab(item.id, index)"
         :class="tabIndex === item.id ? 'main-tabs-item-active' : ''"
         :id="'tab' + item.id">
       <view class="main-tabs-item-name">{{ item.title }}</view>
       <view class="main-tabs-item-line"></view>
      </view>
 </scroll-view>

// tab栏的点击事件
 changeTab(id, index) {
            this.tabIndex = id;
            if (index > 0) {
                this.scrollIntoView = 'tab' + this.tabList[index - 1].id;
            } else {
                this.scrollIntoView = 'tab' + this.tabList[index].id;
            }
        },

注意点

scroll-into-view String 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

如果scroll-into-view的值以数字开头的话，控制台会有这种报错