Vue2：用Vue框架实现 - 移动端的tabbar

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
</head>

<body>
    <!-- 3.实现移动端的tabbar -->
    <style>
        .bar {
            width: 400px;
            height: 100px;
            display: flex;
            justify-content: flex-start;
        }

        .tabbar {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .content .view {
            width: 400px;
            height: 400px;
            background-color: rgb(252, 221, 226);
        }
    </style>
    <div id="box">
        <div class="bar">
            <div :class="{tabbar:tb}" @click="btn1()">{{msg1}}</div>
            <div :class="{tabbar:tb}" @click="btn2()">{{msg2}}</div>
            <div :class="{tabbar:tb}" @click="btn3()">{{msg3}}</div>
            <div :class="{tabbar:tb}" @click="btn4()">{{msg4}}</div>
        </div>
        <div class="content">
            <div class="view" :style="{display:d1}">
                <span>{{view1}}</span>
            </div>
            <div class="view" :style="{display:d2}">
                <span>{{view2}}</span>
            </div>
            <div class="view" :style="{display:d3}">
                <span>{{view3}}</span>
            </div>
            <div class="view" :style="{display:d4}">
                <span>{{view4}}</span>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        new Vue({
            el: "#box",
            data: {
                msg1: "消息",
                msg2: "社区",
                msg3: "应用",
                msg4: "我的",
                view1: "这是消息板块",
                view2: "这是社区板块",
                view3: "这是应用板块",
                view4: "这是我的板块",
                d1: "none",
                d2: "none",
                d3: "none",
                d4: "none",
                tb: true,
            },
            methods: {
                btn1() {
                    this.d1 = "block";
                    this.d2 = "none";
                    this.d3 = "none";
                    this.d4 = "none";
                },
                btn2() {
                    this.d1 = "none";
                    this.d2 = "block";
                    this.d3 = "none";
                    this.d4 = "none";
                },
                btn3() {
                    this.d1 = "none";
                    this.d2 = "none";
                    this.d3 = "block";
                    this.d4 = "none";
                },
                btn4() {
                    this.d1 = "none";
                    this.d2 = "none";
                    this.d3 = "none";
                    this.d4 = "block";
                }
            },
        },
        )
    </script>
</body>

</html>
posted on 2022-08-31 22:46 香香鲲阅读(281) 评论(0) 编辑收藏举报