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

Web前端 潘老师 4年前 (2020-09-15) 2561 ℃ (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
  下载声明:本站资源仅供学习和研究使用,不得用于商业用途。如资源不慎侵犯你的版权请联系博主处理!
  下载地址:本地下载" 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代码如下:

<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)-底部选项卡公共组件实现


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/java/web/1243.html
喜欢 (9)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】