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

Web前端 潘老师 4年前 (2020-09-20) 3053 ℃ (0) 扫码查看

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

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

文件下载

  文件名称:商品图片   文件大小:342kb
  下载声明:本站资源仅供学习和研究使用,不得用于商业用途。如资源不慎侵犯你的版权请联系博主处理!
  下载地址:本地下载" rel="nofollow noopener noreferrer" target="_blank"> 点击下载   
解压密码: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.type}}
</h4>
<ul class="clearfix">
<!-- 商品详情方法暂不实现 -->
<li v-for="(item2,index2) in item1.products" :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:[
{
"type":"女装",
"products":[
{"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":"春秋年会礼服旗袍改良款婚礼妈妈喜宴装中年婆婆女长袖连衣裙高贵"}
]
},
{
"type":"T恤",
"products":[
{"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")]}
]
},
{
"type":"鞋子",
"products":[
{"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)-首页商品列表组件实现


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/java/web/1281.html
喜欢 (8)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】