vue-tabbar vue-slider

1.路由结构图 index.js

使用路由首先要引入Vue-router并use，并将配置好路由的vue-router实例挂载到new出来的Vue实例上，不过vue-cli已将帮我们配置好了，只需要在其基础上继续开发就行

export default new Router({
  routes: [
    {
      path:'/',
      redirect:'/home'
    },
    {
      path: '/home',
      component: Home
    },
    {
      path: '/doctor',
      component: Doctor
    },
    {
      path: '/family',
      component: Family
    },
    {
      path: '/my',
      component: My
    }
  ]
})

• redirect重定向,当路由为空时,会重定向到/home。

2.App.vue

<template>
  <div>
      <router-view></router-view>
      <kk-tabbar></kk-tabbar>
  </div>
</template>

<script>
    import kkTabbar from './components/Tabbar/ktabbar.vue'
    export default {
        components:{
            kkTabbar
        }
    }
</script>

<style>
</style>

3.ktabbar.vue

导航组件是一个固定在底部的列表，每个列表都写好了对应的路由，点击每一个就会切换对应的页面。如果路由层级比较深，写起来可能会很长，如to=”test1/test2/test3” ，考虑在配置路由的js中，给每个路由添加name。这样，在router-link中就只需要传递对应的name就可以。

<template>
    <div class="nav" v-model="select">
        <router-link tag="div" class="tab-item" to="/home">
            <div class="tab-icon home"></div>
            <span class="tab-link">首页</span>
        </router-link>
        <router-link tag="div" class="tab-item" to="/doctor">
            <div class="tab-icon doctor"></div>
            <span class="tab-link">医生</span>
        </router-link>
        <router-link tag="div" class="tab-item" to="/family">
            <div class="tab-icon family"></div>
            <span class="tab-link">家庭成员</span>
        </router-link>
        <router-link tag="div" class="tab-item" to="/my">
            <div class="tab-icon my"></div>
            <span class="tab-link">我的</span>
        </router-link>
    </div>
</template>

<script type="text/ecmascript-6">

    export default {

        create:function(){
        },

        data:function(){
            return{
                select:'home'
            }
        },

        methods:{
        }
    }
</script>

<style>

    .nav{
        position: fixed;
        height: 44px;
        left: 0;
        bottom: 0;
        width: 100%;
        border-top: 1px solid lightgray;
        display: flex;
    }

    .nav .tab-item{
        flex: 1;
        text-align: center;
        align-items: center;// 垂直对齐方式(子元素在交叉轴的对齐方式)

        display: flex;
        flex-direction: column;
    }

    .tab-icon{
        margin-top: 4px;
        display: inline-block;
        width: 14px;
        height: 18px;
        background-size: 14px 18px;

    }

    /*首页*/
    .home{
        background-image: url("../../assets/tabbar/tab_icon01_n@2x.png");
      }
    .router-link-active .home{
        background-image: url("../../assets/tabbar/tab_icon01_s@2x.png")
    }

    /*医生*/
     .doctor{
        background-image: url("../../assets/tabbar/tab_icon02_n@2x.png");
       }
    .router-link-active .doctor{
        background-image: url("../../assets/tabbar/tab_icon02_s@2x.png")
    }
    /*家庭成员*/
    .family{
        background-image: url("../../assets/tabbar/tab_icon04_n@2x.png");
      }
    .router-link-active .family{
        background-image: url("../../assets/tabbar/tab_icon04_s@2x.png")
    }

    /*我的*/
    .my{
        background-image: url("../../assets/tabbar/tab_icon05_n@2x.png");
       }
    .router-link-active .my{
        background-image: url("../../assets/tabbar/tab_icon05_s@2x.png")
    }

    .tab-link{
        margin-top: 2px;
        color: gray;
        font-size: 12px;
    }

    .router-link-active .tab-link{
        /*border-bottom 2px solid #50d2c2*/
        color: #85d1ff;
    }

4.home

首页轮播图组件 vue-awesome-swiper

安装: npm install vue-awesome-swiper –save

在main.js中引入插件并使用

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

由于可能不止一个页面会用到轮播图，可以把轮播图提取出

新建一个 slider.vue文件.

注意: 使用样式引入slider.css

<template>
    <div class="swiper-box" rel="swiperBox">
        <swiper :options="swiperOption" class="swiper-container" ref="mySwiper">
            <!-- 轮播项 -->      
            <swiper-slide v-for="banner in banners">
                <img :src="banner" class="swiper-image">
            </swiper-slide>
            <!-- 轮播的小圆点 -->
            <div class="swiper-pagination" slot="pagination">
            </div>
        </swiper>
    </div>
</template>

<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        data:function() {
            return {
            }
        },
        props:{
            banners:{
              type:Array
          },
            swiperOption:{
            }
        },
        components:{
            swiper:swiper,
            swiperSlide:swiperSlide
        },
        //定义这个sweiper对象
        computed: {
            swiper:function() {
            return this.$refs.mySwiper.swiper;
            }
        },
    }
</script>

<style>
    @import "swiper.css";
    .swiper-box{
        width: 100%;
        height: 180px;
        margin: 0 auto;
    }
    .swiper-box .swiper-container{
        width: 100%;
        height: 100%;
    }
    .swiper-box .swiper-box img{
        width: 100%;
        height: 100%;
    }
</style>

在父组件里面import组件并传递参数

<template>
    <div class="home2">
        <k-slider :banners="banners" :swiperOption="swiperOption"></k-slider>
    </div>
</template>

<script>
    import Slider from '../Common/Swiper/swiper.vue'
    export default {
        data:function(){
          return{
              banners:[
                  'https://img-blog.csdn.net/20171016160652522?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHZsZW1v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center',
                  'https://img-blog.csdn.net/20171016160701668?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHZsZW1v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center'
              ],
              swiperOption:{
                  direction:'horizontal',
                  loop:true,
                  autoplay:1000,
                  paginationType:'fraction',
                  pagination:'.swiper-pagination'
              }
          }
        },
        components:{
            kSlider :Slider
        }
    }
</script>