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

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

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

文件下载

  文件名称:分类图标   文件大小:67kb
  下载声明:本站资源仅供学习和研究使用,不得用于商业用途。如资源不慎侵犯你的版权请联系博主处理!
  下载地址:本地下载" rel="nofollow noopener noreferrer" target="_blank"> 点击下载   
解压密码: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)-首页类型组件实现


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

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

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