vue手机商城项目实战(6)-首页商品列表组件实现

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

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

1、从网上下载一些商品图片,我这里准备了6个商品的图片

文件下载

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

2、将其解压后存放到assets\img目录下,以便测试使用

1、在views目录下新建Goods.vue,代码如下:

注意:商品详情和添加到购物车暂时不实现,只是写了个方法

<template>
    <div id="goods">
        <div class="goods-item" v-for="(item1,index1) in goodsList" :key="index1">
            <h4>
                {{item1.goods.type}}
            </h4>
            <ul class="clearfix">
                <!-- 商品详情方法暂不实现 -->
                <li v-for="(item2,index2) in item1.goods.list" :key="index2" @click="goodsDetail(item2)">
                    <img :src="item2.img[0]"></img>
                    <span class="price">¥{{item2.price}}</span>
                    <span class="name">{{item2.name}}</span>
                    <!-- 添加购物车方法暂不实现 -->
                    <span class="shop-car" @click.stop="addToCart(item2)">
                        <icon name="cart-plus" scale="1.2"></icon>
                    </span>
                </li>
            </ul>
        </div>
    </div> 
</template>

<script>
    export default {
        data(){
            // 模拟商品数据
            return{
                goodsList:[
                    {"goods":{
                            "type":"女装",
                            "list":[
                            {"id":1,"name":"气质长裙","price":599,"img":[require("../assets/img/nz1-1.jpg"),require("../assets/img/nz1-2.jpg")],"explain":"春秋装2020年新款大码女装胖mm洋气贵夫人妈妈连衣裙秋冬气质长裙"},
                            {"id":2,"name":"礼服旗袍","price":699,"img":[require("../assets/img/nz2-1.jpg"),require("../assets/img/nz2-2.jpg")],"explain":"春秋年会礼服旗袍改良款婚礼妈妈喜宴装中年婆婆女长袖连衣裙高贵"}
                            ]
                        }
                    },
                    {"goods":{
                            "type":"T恤",
                            "list":[
                            {"id":3,"name":"短袖T恤","price":119,"img":[require("../assets/img/tx1-1.jpg"),require("../assets/img/tx1-2.jpg")]},
                            {"id":4,"name":"情侣装","price":299,"img":[require("../assets/img/tx2-1.jpg"),require("../assets/img/tx2-2.jpg")]}
                            ]
                        }
                    },
                    {"goods":{
                            "type":"鞋子",
                            "list":[
                            {"id":5,"name":"老爹鞋","price":189,"img":[require("../assets/img/xz1-1.jpg"),require("../assets/img/xz1-2.jpg")],"explain":"2020年新款秋季休闲运动鞋小白鞋女鞋子秋冬爆款百搭ins潮老爹鞋"},
                            {"id":6,"name":"运动鞋","price":219,"img":[require("../assets/img/xz2-1.jpg"),require("../assets/img/xz2-2.jpg")]}
                            ]
                        }
                    }
                  ]
            }
        }
    }
</script>

<style scoped>
    #goods {
        background-color: #f6f6f6;
    }
    h4 {
        padding: 0 10px;
        line-height: 36px;
        font-size: 14px;
        background-color: #fff;
    }
    h4:before {
        content: "";
        display: inline-block;
        margin-right: 6px;
        width: 4px;
        height: 12px;
        background-color: #e8380d;
    }
    ul {
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }
    li {
        position: relative;
        float: left;
        margin: 0 1px;
        display: flex;
        flex-direction: column;
        width: 49%;
        border-right: 1px solid #ddd;
    }
    .goods-item:last-child {
        margin-bottom: 55px;
    }
    img {
        margin: 10px 0;
        width: 100%;
        height: 100%;
    }
    .price {
        padding-left: 10px;
        font-size: 14px;
        color: #e8380d;
    }
    .name {
        padding-left: 10px;
    }
    .shop-car {
        position: absolute;
        right: 10px;
        bottom: 4px;
        color: #1296db;
        cursor: pointer;
        color: #F06431
    }
    .clearfix:after {
        content: '';
        display: block;
        clear: both;
    }
    .clearfix {
        zoom: 1;
    }
</style>

2、修改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>
        <!-- 商品类别 -->
        <Goods></Goods>
    </div>
</template>

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

<style scoped>
</style>

vue手机商城项目实战(6)-首页商品列表组件实现


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

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

登录