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

Web前端 潘老师 3个月前 (09-15) 226 ℃ (0) 扫码查看

本文接上文:vue手机商城项目实战(1)-环境搭建

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在线制作),在此不再赘述。

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

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

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

修改router目录下index.jsroutes路由配置如下:

// 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
  下载声明:本站资源仅供学习和研究使用,不得用于商业用途。如资源不慎侵犯你的版权请联系博主处理! 本站资源全部采用7z压缩,建议使用360压缩解压,解压密码为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代码如下:

<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>

运行项目测试点击项目底部菜单:
vue手机商城项目实战(2)-底部选项卡公共组件实现


版权声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系潘老师进行处理。
喜欢 (7)
请潘老师喝杯Coffee吧!】
分享 (0)

您必须 微信登录 才能发表评论!

登录