vue制作tab切换（vuex + 动画）

先来看一下效果

这里使用了vuex 来处理数据。
（1）在首页选择的时候，将选择的结果存入state里面。
（2）进入到内部页面，再将state的值赋值给当前要切换tab。

这里只写一下内部tab的代码，顺便解释一下：

<template><div class="menu"><ul class="tab-tilte"><liv-for="(title, index) in tabTitle":key="`tilte_${index}`":class="{ active: cur == index }">{{ title }}</li></ul><div class="tab-content"><divv-for="(m, index) in tabMain"v-show="cur == index":key="`content_${index}`">{{ m }}</div></div></div>
</template>
<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {data() {return {tabTitle: ["回到首页", "大赛介绍", "作品列表", "我要投稿"],tabMain: ["内容一", "内容二", "内容三", "内容四"],cur: 1 //默认选中第一个tab};},computed: {...mapState(["selectTab"])},mounted() {this.cur = this.selectTab;},methods: {changeIndex(index) {this.changeLink(index);this.cur = index;}}
};
</script>
<style lang="scss" scoped>
@import "../../../../style/base";
.menu {width: 100%;
}
.tab-tilte {width: 100%;padding: 14px 22px;display: flex;justify-content: space-between;
}
.tab-tilte li {padding: 10px 10px;text-align: center;background-color: #f4f4f4;cursor: pointer;width: 70px;height: 70px;font-size: 18px;text-align: center;border-radius: 8px;
}
/* 点击对应的标题添加对应的背景颜色 */
.tab-tilte .active {background-color: #09f;color: #fff;
}
.tab-content div {//   float: left;//   width: 25%;line-height: 100px;text-align: center;
}
</style>

selectTab是第一次在主界面，点击三个菜单选择的值，这里存储1，2，3 。进入到内部页面，再将值付给当前的cur.

vue制作tab切换（vuex + 动画）相关推荐

vue 实现tab切换动态加载不同的组件
vue 实现tab切换动态加载不同的组件使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...
Axure的动态面板制作tab切换效果
最近进行机房合作画原型图的时候用到了Axure画图软件,画出来的图感觉棒棒哒!在画结账窗体的时候确实遇到了一些问题,因为有动态效果图,点击不同的Tab时要有不同的界面显示,所以学习了一下! 结合注册窗 ...
vue实现Tab切换功能
在项目开发中,我们经常会碰到Tab切换的功能,而在Vue中想实现这样的功能也应该有很多种,常用的三种应该是 Tab路由切换.Tab动态组件切换.通过v-show设置Tab显示隐藏.每种方法实现起来其实 ...
VUE实现Tab切换
VUE中实现Tab切换方式,需要用到以下知识点: 1.动态绑定class,用于导航高亮显示 :class="{active:cur==0}"复制代码 2.click点击事件,用于改 ...
vue中tab切换前端实现_vue实现Tab切换功能
在项目开发中,我们经常会碰到Tab切换的功能,而在Vue中想实现这样的功能也应该有很多种,常用的三种应该是 Tab路由切换.Tab动态组件切换.通过v-show设置Tab显示隐藏.每种方法实现起来其实 ...
vue中tab切换前端实现_使用vue实现tab操作
tab功能在网页中是比较常见的,那么用vue怎么实现tab操作呢,与jQuery实现tab的思路有什么区别呢? 在使用jQuery类库实现tab功能时,是获取鼠标在mousenter或click时的i ...
HTML简单的自定义属性制作tab切换
今天做淘宝页面时候碰到一个tab切换如下图所示: 当我鼠标移到第一个tab时候那个小三角形在第一个tab项里移到第二个时候就到了第二个里面这种效果我这里用了个小技巧就是在HTML中自定 ...
vue + element-ui tab切换
1.安装element-ui npm install element-ui --save 2.在main.js中引入element 和 css文件 // The Vue build version t ...
jquery学习之tab切换及动画效果，涉及animate()，siblings()
效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

vue制作tab切换（vuex + 动画）

vue制作tab切换（vuex + 动画）相关推荐

最新文章

热门文章