vue手机商城项目实战（5）-首页类型组件实现

本文接：vue手机商城项目实战（4）-首页轮播图组件实现
1、我们需要在轮播图下实现商城商品分类类型展示，主要是为了展示图标。所以我准备了一些分类图标，下载后放入assets\img目录下

2、我们在views目录下，新建Type.vue代码如下：

<template>
    <div id="type">
        <ul class="type-list">
            <li v-for="(item,index) in typeList" :key="index">
                <a :href="item.link">
                    <img class="type-img" :src="item.url"/>
                    <span class="type-name">{{item.name}}</span>
                </a>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                // 模拟数据，暂时将超链接都设为#
                typeList:[
                    {"name":"女装","url":require("../assets/img/clothes.png"),"link":"#"},
                    {"name":"短裤","url":require("../assets/img/shorts.png"),"link":"#"},
                    {"name":"裙子","url":require("../assets/img/skirt.png"),"link":"#"},
                    {"name":"西装","url":require("../assets/img/suit.png"),"link":"#"},
                    {"name":"T恤","url":require("../assets/img/tshirt.png"),"link":"#"},
                    {"name":"眼镜","url":require("../assets/img/glasses.png"),"link":"#"},
                    {"name":"袜子","url":require("../assets/img/socks.png"),"link":"#"},
                    {"name":"鞋子","url":require("../assets/img/shoes.png"),"link":"#"},
                    {"name":"内衣","url":require("../assets/img/underwear.png"),"link":"#"},
                    {"name":"全部","url":require("../assets/img/shopping.png"),"link":"#"}
                ]
            }
        }
    }
</script>

<style scoped>
    #type {
        height:145px;
        background-color: #f3f3f3;
        margin-top: 2px;
    }
    .type-list li {
        float: left;
        padding: 6px 0;
        width: 20%;
        text-align: center;
        list-style-type:none;
    }
    .type-list li a {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
    }
    .type-img {
        display: inline-block;
        width: 40px;
        height: 40px;
    }
    .type-name {
        font-size: 12px;
        color: #555;
    }
</style>

3、将Type.vue导入到Home.vue中使用，Home.vue现在代码如下：

<template>
    <div id="home">
        <!-- 顶部导航栏 -->
        <mt-header fixed title="首页">
            <mt-button icon="search" slot="right" @click="search"></mt-button>
        </mt-header>
        <!-- 由于顶部导航栏固定，所以轮播图要上边距占据其高度 -->
        <div style="height: 40px;"></div>
        <!-- 轮播图 -->
        <Banner></Banner>
        <!-- 类型列表 -->
        <Type></Type>
    </div>
</template>

<script>
    // 导入轮播图组件
    import Banner from './Banner.vue'
    import Type from './Type.vue'
    export default {
        methods:{
            // 点击搜索按钮，跳转到搜索组件
            search(){
                this.$router.push({name:"Search"});
            }
        },
        // 注册组件
        components:{
            Banner,
            Type
        }
    }
</script>

<style scoped>
</style>

4、测试效果：

喜欢 (6)赏

【请潘老师喝杯Coffee吧！】

分享 (0)