原生JS封装vue Tab切换效果

本文实例为大家分享了原生JS封装vue Tab切换的具体代码,供大家参考,具体内容如下

先看效果图

使用的技术

vue,js,css3

vue组件 可以直接使用

<template>
  <div class="bookcircle-header">
    <ul class="wrapper" :class="headerActive == 0 ? 'friend' : 'booklist'">
      <li @click="headerChange(0)" :class="headerActive == 0 ? 'active' : ''">
        书友
      </li>
      <li @click="headerChange(1)" :class="headerActive == 1 ? 'active' : ''">
        书单
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      headerActive: 0,
    };
  },
  computed: {},
  created() {},
  mounted() {
    //初始化抛发
    this.$emit("change", this.headerActive);
  },
  methods: {
    headerChange(index) {
      this.headerActive = index;
      this.$emit("change", index);
    },
  },
};
</script>

<style lang="less" scoped>
.bookcircle-header {
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  .wrapper {
    width: 286px;
    font-size: 14px;
    height: 29px;
    color: #1489fe;
    border: 1px solid #1489fe;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box; // 解决边框溢出,将border包含在盒子内部
    li {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2;
    }
    .active {
      color: white;
    }
    &::before {
      content: "";
      width: 143px;
      height: 100%;
      background-color: #1489fe;
      position: absolute;
      top: 0px;
      left: 0px;
      border-radius: 13px 0px 0px 13px;
      z-index: 1;
      transition: all 0.3s;
    }
    &.firend::before {
      transform: translateX(0);
      border-radius: 13px 0px 0px 13px;
    }
    &.booklist::before {
      transform: translateX(100%);
      border-radius: 0px 13px 13px 0px;
    }
  }
}
</style>

实现原理:

使用ul,li以及弹性盒子,首先给父元素设置宽高,然后通过弹性盒子将子元素 li 水平方向展开, 给子元素 li 设置 flex:1,让子元素平分父元素的宽。

然后给父元素设置伪元素,以绝对定位的方式覆盖第一个 li 元素, 通过z-index属性,控制伪元素和子元素的层级显示关系。

然后给伪元素设置 transition 属性 搭配 transform: translateX(); 属性,让元素水平移动就可以了

注意点:

1、虽然切换的点击事件在子元素上,并且也给子元素添加 了active样式,但tab的切换效果并不是通过子元素来实现的,而是通过父元素的伪元素来实现切换效果。
2、必须要根据子元素的 index 给父元素设置动态class, 这样父元素的伪元素才能根据选中的子元素执行切换动画
3、本组件使用的是 淘宝amfe-flexible、 postcss适配,使用时注意适配问题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 使用vue-router与v-if实现tab切换遇到的问题及解决方法

    vue-router 该如何使用 忽然碰到一个常见的问题,明明可以使用 v-if / v-show 可以的解决的问题,有没有必要是使用 vue-router来解决. 比如常见的 tab 切换.一时间,我有些犹豫了,有没有必要滥用 vue-router.那到底何时用才叫合理呢? 先上代码,用两种方式实现的效果 使用vue-router router import Tab1 from './components/tab/TabOne' import Tab2 from './components/t

  • Vue2.0 多 Tab切换组件的封装实例

    Vue2.0 多 Tab切换组件简单封装,满足自己简单的功能,可以直接拿去使用! 首先上效果图: 功能简单介绍: 1.支持tab切换 2.支持tab定位 3.支持tab自动化 仿React多Tab实现,总之可以正常使用满足日常需求, 1.使用方法: ==index.vue文件== <TabItems> <div name="买入" class="first"> <Content :isContTab = "0" /&

  • Vue.js实现tab切换效果

    Vue是一个小巧轻便的JavaScript库.它有一个简单易懂的API,能够让开发者在开发web应用的时候更加简易便捷.实际上,一直让Vue引以为豪的是它的便捷性.执行力.灵活性. 目前在学习Vue.js.在学习的时候需要把手动操作DOM的思维去掉,因为Vue是数据驱动,不需要手动操作DOM.他通过一些特殊的hmtl语法,将DOM和数据绑定起来.一旦创建了绑定,DOM就会和数据保持同步,每当变更了数据,DOM也会相应的发生改变,更新. 下面是我用vue.js来实现的tab切换功能. <!--这里

  • vue仿淘宝订单状态的tab切换效果

    前几天刚开始使用vue 做项目,然后自己就在项目中摸索写了一个tab切换的小dome,仿淘宝订单状态的tab切换. HTML 代码: <div class="navigation"> //这里是通过循环遍历出来的数据,你需要根据index的值来判断你现在点击的是第几个tab栏导航,同时在js中写一个navChange的方法来把index 传递到就js中来改变tabIndex(这是在初始化时设置的默认index)的值 <span v-for="(item, i

  • vue刷新和tab切换实例

    首先写个子组件用来放刷新的内容,命名为pull(可以看例子最后面放的.) 然后再要刷新的页面引用 <template> <div class="fbjbox container"> <div class="fbjbox1"> <tab ref='tab' :list="['推荐','热门','最新']" width="33%" @change='tabchange' style=&qu

  • Vue.js组件tab实现选项卡切换

    本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{padding: 0;margin:

  • vue滚动tab跟随切换效果

    分享一个我前几天做的移动端 tab滚动跟随的例子 随着滚动条的滚动,tab会对应进行切换 首先我们需要监听当前页面的滚动 mounted(){ //记录每个内容对用的dom数组 this.arrDom = document.getElementsByClassName("item-content"); window.addEventListener('scroll', this.handleScroll); }, destroyed(){ window.removeEventListe

  • Vue.js组件tabs实现选项卡切换效果

    今天给大家分享一个小颖自己写的vue组件,因为小颖也才接触vue没多久,如果有什么不足的地方,希望大家提出来,小颖加以改正.以下就是具体如何实现tabs啦. 调用示例: <template> <div class="tabs-contents"> <!-- 调用tabs组件 --> <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'> <di

  • Vue.js tab实现选项卡切换

    本文为大家分享了Vuejs 组件化开发tab组件实例,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/index.css" rel=&quo

  • vue实现tab切换外加样式切换方法

    实例如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; list-style: none } #app { width: 504px; height: 300px; margin: 100

随机推荐