使用vue做一个“淘宝“项目——1

实现底部导航栏

---

前言：将需要的文件做好引用

---

目录：

创建项目文件

删除原有文件

引用资源文件

实现底部导航栏

显示页面

做出首页

显示商品栏

做出分类

---

一、实现静态版底部导航栏
先进行引用组件，在 src->components 下新建vue组件

将组件取名为Tabbar (底部导航栏)

创建完Tabbar之后在 Tabbar.vue 下的 template 标签中创建一个跟标记 div 标签，然后引用 vant的Tabbar 组件 （自定义组件再引用文档vant中的组件），然后找到文档中的Tabbar创建 van-tabbar 标签，代码如下

<template>
   <div>
      <van-tabbar v-model="active">
         <van-tabbar-item icon="compass-full">精选van-tabbar-item>
      van-tabbar>
   div>
template>

<script>
    export default {
        name: "Tabbar",
       data(){
           return{
              active:0 //默认选那中哪个导航
           }
       }
    }
script>

<style scoped>

style>

而在 van-tabbar-item 标签下的属性 icon 引用的图标是我们自己引用的 iconfont.css 下的图标

写完 Tabbar.vue 之后在 App.vue 中要进行引用，代码如下

<template>
  <div id="app">
    
    <Tabbar>Tabbar>  
  div>
template>

<script>
  //1.引入组件
  import Tabbar from '@/components/Tabbar.vue'
  export default{
    name:"",
    components:{
      //2.注册组件
      Tabbar
    }
  }
script>

<style>

然后 npm run serve 运行，若为以下这种情况则成功了1/4

那如果想让他变成底部的导航栏就要在 main.js 中再引用vant文档下的import 'vant/lib/index.css'; 代码截图如下：

引用完成之后即成功，运行截图如下

这里只有一个剩下三个也在 Tabbar.vue 中写，代码如下

<template>
   <div>
      <van-tabbar v-model="active">
         <van-tabbar-item icon="compass-full">精选van-tabbar-item>
         <van-tabbar-item icon="class-full">分类van-tabbar-item>
         <van-tabbar-item icon="cart-full">购物车van-tabbar-item>
         <van-tabbar-item icon="wode">我的van-tabbar-item>
      van-tabbar>
   div>
template>

<script>
    export default {
        name: "Tabbar",
       data(){
           return{
              active:1
           }
       }
    }
script>

<style scoped>

style>

写完之后，运行结果如下

虽然已经将底部导航栏实现，但是这是静态版的导航栏，并不是我们想要的，下面来介绍如何写成动态版

二、实现动态版底部导航栏
如何实现动态，简单来说就是将导航栏分离开来
在实现之前先在 Tabbar.vue 的默认首选项 active 下声明 tabs ,代码如下：

tabs:[
           {
                 name:'精选',
                 icon:'compass-full',
           },
           {
                 name:'分类',
                 icon:'class-full',
           },
           {
                 name:'购物车',
                 icon:'cart-full',
           },
           {
                 name:'我的',
                 icon:'wode',
           }
]

声明完成之后可以将静态的注释掉了

然后在他的下面进行列表渲染，代码如下：

 {{tab.name}}
 

下面就可以运行出来了

这就实现了动态网页，下一篇让每个网页运行出来页面。

---

上一篇:引用资源文件
下一篇:显示页面

---

推荐BGM: People Watching