当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue实现首页导航面板组件

vue实现首页导航面板组件

2020年04月06日  | 移动技术网IT编程  | 我要评论

效果图

 

 

src/pages/home/nav.vue

<template>
    <div class="nav">
        <ul class="nav-list">
            <li class="nav-item" v-for="(nav,index) in navitems" :key="index">
                <a :href="nav.linkurl" class="nav-link">
                    <img :src="nav.picurl" alt="" class="nav-pic">
                    <p class="nav-title">{{nav.text}}</p>
                </a>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name:'homenav',
    data(){
        return{
            navitems:[
                {
                    linkurl:'www.baidu.com',
                    picurl:require('assets/img/nav/nav-item-1.png'),
                    text:'团购'
                },{
                    linkurl:'www.baidu.com',
                    picurl:require('assets/img/nav/nav-item-2.png'),
                    text:'团购'
                },{
                    linkurl:'www.baidu.com',
                    picurl:require('assets/img/nav/nav-item-3.png'),
                    text:'团购'
                },{
                    linkurl:'www.baidu.com',
                    picurl:require('assets/img/nav/nav-item-4.png'),
                    text:'团购'
                },{
                    linkurl:'www.baidu.com',
                    picurl:require('assets/img/nav/nav-item-5.png'),
                    text:'团购'
                },{
                    linkurl:'www.baidu.com',
                    picurl:require('assets/img/nav/nav-item-6.png'),
                    text:'团购'
                },{
                    linkurl:'www.baidu.com',
                    picurl:require('assets/img/nav/nav-item-7.png'),
                    text:'团购'
                },{
                    linkurl:'www.baidu.com',
                    picurl:require('assets/img/nav/nav-item-8.png'),
                    text:'团购'
                },{
                    linkurl:'www.baidu.com',
                    picurl:require('assets/img/nav/nav-item-9.png'),
                    text:'团购'
                },{
                    linkurl:'www.baidu.com',
                    picurl:require('assets/img/nav/nav-item-10.png'),
                    text:'团购'
                }
            ],
        }
    }
}
</script>

<style scoped>
    .nav{
        width:100%;
        padding-top:15px;
        background:#fff;
    }
    .nav-list{
        display:flex;
        flex-wrap:wrap;
    }
    .nav-item{
        width:20%;
    }
    .nav-link{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-bottom:15px;
    }
    .nav-pic{
        width:60%;
        margin-bottom:7px;
    }
</style>

 

src/pages/home/index.vue

<template>
    <div class="home">
        <scrollbar>
            <slider />
            <home-nav />
        </scrollbar>
        <!-- 该页面自己的子路由 -->
        <router-view></router-view>
    </div>

</template>

<script>
import slider from 'components/slider';
import scrollbar from 'components/scroll';
import homenav from './nav';

export default {
    name:"home",
    components:{
        slider,   
        scrollbar,
        homenav    
    }
}
</script>

<style scoped>
    .home{
        width:100%;
        height:100%;
    }
</style>

 

src/assets/scss/index.scss

@import 'icons';

*{
    margin:0;
    padding:0;
}
html,body{
    // 必须设置，否则内容滚动效果无法实现
    width:100%;
    height:100%;
}
ul,li{
    list-style:none;
}
a{
    text-decoration: none;
    color:#333;
}

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网