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

Web前端 潘老师 2个月前 (09-19) 161 ℃ (0) 扫码查看

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

文件下载

  文件名称:分类图标  文件大小:67kb
  下载声明:本站资源仅供学习和研究使用,不得用于商业用途。如资源不慎侵犯你的版权请联系博主处理! 本站资源全部采用7z压缩,建议使用360压缩解压,解压密码为www.panziye.com
  下载地址:本地下载

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、测试效果:
vue手机商城项目实战(5)-首页类型组件实现


版权声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系潘老师进行处理。
喜欢 (5)
请潘老师喝杯Coffee吧!】
分享 (0)

您必须 微信登录 才能发表评论!

登录