Vue实现滑动标签页，让网页清爽不烦乱

标签页功能概述

你们知道吗？每次咱们上网时，看到那些标签页满天飞的链接，真的让人心烦意乱。别着急，我这有个小窍门儿可以教给你——用滑动屏幕来翻页，那感觉就会清淡很多了。下面，我就简单说说怎么用Vue做滑动标签页的事，希望能帮到你们

Vue 实现可滑动标签页

要想有滑动标签页的话，得先做个标签页组件。这个组件里面得放上导航栏和内容部分。导航栏这些选项卡，用v-for指令就能轻松搞定。再说加点slidingNavOptions变量，就能知道目前是啥子选项卡了，然后按着修改下样式就行。

  

    

      
 visibleCount }">
        

          {{ tab.label }}
        
      
    
    

      
    
  


export default {
  name: 'Tab',
  props: {
    tabs: {
      type: Array,
      required: true
    },
    activeIndex: {
      type: Number,
      default: 0
    },
    visibleCount: {
      type: Number,
      default: 5
    }
  },
  methods: {
    setActive(index) {
      this.$emit('update:activeIndex', index);
    }
  }
}


.tab-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tab-nav-wrapper {
  flex-shrink: 0;
  overflow: hidden;
}
.tab-nav {
  display: flex;
  width: 100%;
  padding: 0 12px;
  transition: transform 0.3s ease;
  white-space: nowrap;
}
.tab-item {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  margin-right: 6px;
  font-size: 14px;
  cursor: pointer;
}
.tab-item.active {
  color: #409eff;
}
.scrollable {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollable::-webkit-scrollbar {
  display: none;
}
.tab-content {
  flex: 1;
  overflow: auto;
}

简单点说，就是把标记页小部件扔到你那个主组件里头去，然后往每个卡片里塞你想要呈现的信息。记得在数组里记下来每张卡片的名字以及里面有的元素，同时也别忘了用v-model给此刻看到的那张打个勾儿哟。这么搞完后，你的用户只要轻轻一按按钮，内容部分就能跟着换起来了

优化技巧介绍

1.虚拟滚动

  

    
可滑动的标签页
    
      
{{ tab.content }}
    
  


import Tab from './components/Tab';
export default {
  name: 'App',
  components: {
    Tab
  },
  data() {
    return {
      activeIndex: 0,
      tabs: [
        { label: '标签一', content: '标签一的内容' },
        { label: '标签二', content: '标签二的内容' },
        { label: '标签三', content: '标签三的内容' },
        { label: '标签四', content: '标签四的内容' },
        { label: '标签五', content: '标签五的内容' },
        { label: '标签六', content: '标签六的内容' },
        { label: '标签七', content: '标签七的内容' },
        { label: '标签八', content: '标签八的内容' },
        { label: '标签九', content: '标签九的内容' },
        { label: '标签十', content: '标签十的内容' }
      ]
    }
  }
}


.app-container {
  width: 100%;
  height: 100%;
}
.app-header {
  height: 80px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  line-height: 80px;
  background-color: #409eff;
  color: #fff;
}
.tab-container {
  height: calc(100% - 40px);
}

当看到好多标签页时，滑动导航栏可能有点卡住。别担心，虚拟滚动就能解决这个问题！它只会显示你看得见的选项卡，剩下的就在那儿占个位置，这样就可以少渲染网页，让电脑运行起来更加飞快！

2.预加载

记住！用v-if的办法挑选出一些常用的选项卡优先加载，剩下的稍微等会儿也没问题。这样浏览网页速度快，还省电呐！用得着的时候再慢悠悠地加载也没关系的~

3.懒加载

懒加载就是在你打开新标签页时，不让所有内容一下全都出现，而是等到你真的需要看的时候再慢慢显示。这样子浏览起来就会更迅速

结语与展望

Vue.js真的很棒，尤其像我们这种需要做talk pages的时候。用它的组件、指令和绑定，什么问题都轻松搞定。再学习一些高阶技能，比如虚拟滚动、预先加载、延迟加载，你会发现你的应用程序变得更加顺畅，用户体验也棒极了！希望这篇文章能对你们在使用Vue开发项目时有帮助呀。