26.VUE过渡实现tabs切换案例

最新推荐文章于 2023-05-24 09:01:57 发布

休息休息夏

最新推荐文章于 2023-05-24 09:01:57 发布

阅读量449

点赞数 2

分类专栏： VUE基础学习文章标签： vue tab html javascript

本文链接：https://blog.csdn.net/qq_42881159/article/details/117305761

版权

VUE基础学习专栏收录该内容

31 篇文章 0 订阅

订阅专栏

文章目录

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body,#app{
            height: 100%;
            overflow: hidden;
        }
        .title{
            height:60px;
            background-color: #3c3c3c;
            color: #E9E7E7;
            text-align: center;
            font-size: 24px;
            line-height: 60px;
        }
        .page{
            /*calc()函数是css的计算属性，可以在小括号内进行基础的数值运算*/
            height: calc(100% - 60px - 40px);
        }
        .tabs{
            height: 50px;
            line-height: 30px;
            background-color: #3c3c3c;
            text-align: center;
            position: relative;
        }
        .tabs-item{
            float: left;
            width: 25%;
            text-align: center;
        }
        .tabs-item:hover{
            cursor: pointer;
            opacity: 0.6;
        }
        .tabs-active{
            position: absolute;
            width: 25%;
            height: 100%;
            background-color: #000;
            color: #FFFFFF;
            left: 0;
            top: 0;
            transition: all .3s;
        }
        .v-enter-active,.v-leave-active{
            transition:  all .3s;
        }
        .v-enter-to,.v-leave{
            transform: translate(0);
        }
        .v-enter{
            transform: translateX(100%);
        }
        /*.v-leave-to{*/
        /*    transform: translate(-100%);*/
        /*}*/
    </style>
</head>
<body>
<div id="app">
    <div class="title">标题</div>
    <transition mode="out-in">
        <component :is="nowPage"></component>
    </transition>
    <div class="tabs">
        <div class="tabs-item" v-for="(tab,index) in tabList" :key="index" @click="change(index,tab.content,tab.page)">{{tab.content}}</div>
        <div class="tabs-active" :style="{'left':left}">{{title}}</div>
    </div>
</div>
<template id="home">
    <div style="background-color: pink" class="page">首页</div>
</template>
<template id="news">
    <div style="background-color: red" class="page">新闻</div>
</template>
<template id="mine">
    <div style="background-color: orange" class="page">我的</div>
</template>
<template id="about">
    <div style="background-color: green" class="page">关于</div>
</template>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            tabList:[
                {color:"pink",content:"首页",page:"home"},
                {color:"orange",content:"新闻",page:"news"},
                {color:"green",content:"我的",page:"mine"},
                {color:"red",content:"关于",page:"about"},
            ],
            nowPage:"mine",
            title:"首页",
            left:0,
        },
        methods: {
            change(index,content,page){
                this.nowPage = page;
                this.title = content;
                this.left = (index*25)+"%";
            }
        },
        components:{
            home:{
                template:"#home",
            },
            news:{
                template:"#news",
            },
            mine:{
                template:"#mine",
            },
            about:{
                template:"#about",
            }
        }
    });
</script>
</html>

休息休息夏

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
26.VUE过渡实现tabs切换案例

文章目录<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <style> *{ margin:0; padding:0;
复制链接

扫一扫