vue导航和首页轮播图实现

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/[e-mail]");      }    .router-link-active .home{        background-image: url("../../assets/tabbar/[e-mail]")    }    /*医生*/     .doctor{        background-image: url("../../assets/tabbar/[e-mail]");       }    .router-link-active .doctor{        background-image: url("../../assets/tabbar/[e-mail]")    }    /*家庭成员*/    .family{        background-image: url("../../assets/tabbar/[e-mail]");      }    .router-link-active .family{        background-image: url("../../assets/tabbar/[e-mail]")    }    /*我的*/    .my{        background-image: url("../../assets/tabbar/[e-mail]");       }    .router-link-active .my{        background-image: url("../../assets/tabbar/[e-mail]")    }    .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:[                  'http://img.blog.csdn.net/20171016160652522?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHZsZW1v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center',                  'http://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>