vue单页面实现tabBar_vue tab键功能在局部使用-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43927397/article/details/122986703

这个博客展示了如何使用HTML、CSS和Vue.js创建一个移动端底部导航栏，包括固定定位、响应式布局和点击事件处理。示例代码详细地解释了每个元素的样式设置和Vue数据绑定，以及通过`jumpUrl`方法实现页面跳转的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>底部导航</title>
    <meta name="keywords" content="关键字" />
    <meta name="description" content="本页描述或关键字描述" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
    <style>
        .footer-wrap{
            position: fixed;
            width: 100%;
            bottom: 0px;
            left: 0px;
            right: 0px;
            background: #ffffff;
            z-index: 999;
            height: 68px;
            display: flex;
            justify-content: space-around;
        }
        .tab-item{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /* border: 1px solid red; */
            width: 33%;
        }
        .tab-img{
            width: 26px;
            margin-bottom: 3px;
        }
        .tab-title{
            font-size: 12px;
            color: #6F6F6F;
        }
        .tab-title-active{
            color: #26B0FF;
        }
    </style>
</head>
<body style="margin: 0px;padding: 0px;background: #EDEDED;">
    <div class="footer-wrap" id="tapBar">
        <div class="tab-item" v-for="item in tabBarList" @click="jumpUrl(item)">
            <img class="tab-img" :src=" item.page == index ? item.rightImg : item.huiImg">
            <span class="tab-title" :class="item.page == index ? 'tab-title-active' : ''">{{item.title}}</span>
        </div>
    </div>
</body>
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/vue@2.js"></script>
<script>
    var app = new Vue({
        el: '#tapBar',
        data: {
            name: 'aaa',
            index: 1,
            tabBarList: [
                {
                    page: 1,
                    rightImg: '../img/now-zd.png',
                    huiImg: '../img/now-zd-hui.png',
                    title: '当期账单',
                    url: '/accountStatement.html'
                },
                {
                    page: 2,
                    rightImg: '../img/old-zd.png',
                    huiImg: '../img/old-zd-hui.png',
                    title: '历史账单',
                    url: '/historicalBill.html'
                },
                {
                    page: 3,
                    rightImg: '../img/merchant-right.png',
                    huiImg: '../img/merchant-right-hui.png',
                    title: '商户信息',
                    url: '/merchantInfo.html'
                }
            ]
        },
        creater() {},
        methods: {
            jumpUrl(data) {
                console.log(data)
                this.index = data.page
                window.location.href = data.url
            }
        }
    })
</script>