水平滑动 tab 居中

能够左右滑动的 tabs 标签页，有时候需要将处于 active 状态的 tab 居中显示，效果如下

html 文件如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>JS Bin</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <div class="slide-wrap" id="parent">
        <div
          v-for="(item,index) in tabList"
          @focus="changeTab(index)"
          :key="index"
          :id="'item'+index"
          tabindex="0"
          :class="{item:true,'focus':activeIndex===index?true:false}"
        >
          {{item.name}}
        </div>
      </div>
    </div>
  </body>
</html>

CSS 文件如下：

.slide-wrap {
  overflow-x: scroll;
  display: flex;
}
.slide-wrap::-webkit-scrollbar {
  display: none;
}
.item {
  text-align: center;
  white-space: nowrap;
  width: 20%;
  flex-shrink: 0;
  outline: none;
}
.focus {
  box-sizing: border-box;
  transition: border 0.4s;
  box-shadow: none;
  outline: none;
}
.focus:focus {
  outline: none;
  background-color: #ccc;
}

JS 文件如下：

var app = new Vue({
  el: '#app',
  data: {
    activeIndex: 0,
    tabList: [
      {
        name: '分类0',
        value: 0
      },
      {
        name: '分类1',
        value: 1
      },
      {
        name: '分类2',
        value: 2
      },
      {
        name: '分类3',
        value: 3
      },
      {
        name: '分类4',
        value: 4
      },
      {
        name: '分类5',
        value: 5
      },
      {
        name: '分类6',
        value: 6
      },
      {
        name: '分类7',
        value: 7
      },
      {
        name: '分类8',
        value: 8
      },
      {
        name: '分类9',
        value: 9
      },
      {
        name: '分类10',
        value: 10
      }
    ]
  },
  methods: {
    changeTab(index) {
      this.activeIndex = index
      const father_dom = document.getElementById('parent')
      const son_dom = document.getElementById('item' + index)
      const clientWidth = father_dom.clientWidth
      const offsetLeft = son_dom.offsetLeft
      father_dom.scrollLeft = offsetLeft - clientWidth / 2 + son_dom.clientWidth / 2
    }
  }
})

Previous表单和 FormData 对象 Nextjs 中的 this

Last updated 3 years ago

Was this helpful?

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>JS Bin</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div class="slide-wrap" id="parent"> <div v-for="(item,index) in tabList" @focus="changeTab(index)" :key="index" :id="'item'+index" tabindex="0" :class="{item:true,'focus':activeIndex===index?true:false}" > {{item.name}} </div> </div> </div> </body> </html>

.slide-wrap { overflow-x: scroll; display: flex; } .slide-wrap::-webkit-scrollbar { display: none; } .item { text-align: center; white-space: nowrap; width: 20%; flex-shrink: 0; outline: none; } .focus { box-sizing: border-box; transition: border 0.4s; box-shadow: none; outline: none; } .focus:focus { outline: none; background-color: #ccc; }

var app = new Vue({ el: '#app', data: { activeIndex: 0, tabList: [ { name: '分类0', value: 0 }, { name: '分类1', value: 1 }, { name: '分类2', value: 2 }, { name: '分类3', value: 3 }, { name: '分类4', value: 4 }, { name: '分类5', value: 5 }, { name: '分类6', value: 6 }, { name: '分类7', value: 7 }, { name: '分类8', value: 8 }, { name: '分类9', value: 9 }, { name: '分类10', value: 10 } ] }, methods: { changeTab(index) { this.activeIndex = index const father_dom = document.getElementById('parent') const son_dom = document.getElementById('item' + index) const clientWidth = father_dom.clientWidth const offsetLeft = son_dom.offsetLeft father_dom.scrollLeft = offsetLeft - clientWidth / 2 + son_dom.clientWidth / 2 } } })