首页教程软件教程正文

vue手机商城项目实战（2）-底部选项卡公共组件实现

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 670 浏览 2560 个字

摘要 :

本文接上文：vue手机商城项目实战（1）-环境搭建一、index.html设计 1、public\\index.html我们需要修改下title，根据自己需求定义，我这里修改index.html如下： <!……

本文接上文：vue 手机商城项目实战（1）-环境搭建

一、index.html设计

1、public\\index.html我们需要修改下title，根据自己需求定义，我这里修改index.html如下：

<!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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>子夜商城</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2、创建一个自己的favicon.ico，替换掉public下的favicon.ico（可以直接自己百度ico在线制作），在此不再赘述。

二、新建4个模块组件

在src下新建views目录，在views目录下新建4个模块组件，不过里面具体内容目前都不实现，仅有基本模板，template中写上对应名称，只是为了方便路由导入使用和测试，名称分别为：

首页：Home.vue
分类：Category.vue
购物车：Shopcar.vue
我的：My.vue

三、配置4个模块路由

修改router目录下index.js的routes路由配置如下：

// 5.2 配置路由对象数组
routes: [
    {
        name:"Home",
        path:"/",
        component:()=>import('@/views/Home.vue')
    },
    {
        name:"Category",
        path:"/category",
        component:()=>import('@/views/Category.vue')
    },
    {
        name:"Shopcar",
        path:"/shopcar",
        component:()=>import('@/views/Shopcar.vue')
    },
    {
        name:"My",
        path:"/my",
        component:()=>import('@/views/My.vue')
    }
]

四、底部选项卡实现

1、底部选项卡需要使用图标，因此我们上传4张图标，分别为首页、分类、购物车、我的，图标下载地址如下：

文件下载	文件名称：选项卡素材	文件大小：2kb
	下载声明：本站资源仅供学习和研究使用，不得用于商业用途。如资源不慎侵犯你的版权请联系博主处理！
	下载地址：本地下载\” rel=\”nofollow noopener noreferrer\” target=\”_blank\”> 点击下载	解压密码：www.panziye.com

2、在assets目录下新建img目录，我们将这4张图标放入img中。
3、在components中新建名为Footer.vue的文件：

<template>
    <div id="footer">
        <!-- 固定在底部的选项卡 哪个菜单被选中则selected就和菜单id值相同 -->
        <mt-tabbar v-model="selected" fixed>
          <mt-tab-item id="home">
            <img slot="icon" src="../assets/img/home.png">
            首页
          </mt-tab-item>
          <mt-tab-item id="category">
            <img slot="icon" src="../assets/img/category.png">
            分类
          </mt-tab-item>
          <mt-tab-item id="shopcar">
            <img slot="icon" src="../assets/img/shopcar.png">
            购物车
          </mt-tab-item>
          <mt-tab-item id="my">
            <img slot="icon" src="../assets/img/my.png">
            我的
          </mt-tab-item>
        </mt-tabbar>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                selected:'home'
            }
        },
        watch:{
            // 监听selected属性，实现编程式导航页面跳转
            selected(){
                if(this.selected == 'home'){
                    this.$router.push({name:"Home"});
                }else if(this.selected == 'category'){
                    this.$router.push({name:"Category"});
                }else if(this.selected == 'shopcar'){
                    this.$router.push({name:"Shopcar"});
                }else if(this.selected == 'my'){
                    this.$router.push({name:"My"});
                }
            }
        }
    }
</script>

<style scoped>

</style>

五、App.vue设计

修改App.vue代码如下：

<template>
    <div id="app">
        <!-- 主体 -->
        <router-view></router-view>
        <!-- 底部选项卡 -->
        <Footer></Footer>
    </div>
</template>

<script>
    import Footer from './components/Footer.vue'
    export default {
      name: 'app',
      components: {
          Footer
      }
    }
</script>

<style>
/* 清除浏览器对所有元素默认边距 */
* {
    padding: 0;
    margin: 0;
}
</style>

六、测试

运行项目测试点击项目底部菜单：