前端
热门推荐组件(@/home/HotBox)
1、VantUI中找到左右结构的单元格
1
2
3
4
<van-cell-group>
<van-cell title="单元格" value="内容" />
<van-cell title="单元格" value="内容" label="描述信息" />
</van-cell-group>
只需要一行单元格，改写单元格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
<!-- 热门景点 -->
<div class="home-hot-box">
<!-- 顶上导航 -->
<van-cell
title="热门推荐"
icon="/static/home/hot/fire.png"
value="全部榜单"
is-link/>
<!-- // 顶上导航 -->
<!-- 景点列表 -->
<!-- // 景点列表 -->
</div>
</template>
标题过长使用省略号省略的功能实现
1
2
3
4
5
6
7
white-space: nowrap; // 严格的不换行
text-overflow: ellipsis; // 省略号
或使用内置样式
<!-- 最多显示一行 -->
<div class="van-ellipsis">这是一段最多显示一行的文字，多余的内容会被省略</div>
2、模板
顶部导航栏
1
2
3
4
5
6
7
8
<!-- 顶上导航 -->
<van-cell
title="热门推荐"
icon="/static/home/hot/fire.png"
value="全部榜单"
title-style="text-align:left"
is-link/>
<!-- // 顶上导航 -->
box-main:景点列表
1
2
3
4
5
<!-- 景点列表 -->
<div class="box-main">
...
</div>
<!-- // 景点列表 -->
hot-item:单个景点（景点图片、景点标题、价格）
1
2
3
<a href="#" class="hot-item">
...
</a>
img:景点图片
1
2
3
4
<div class="img">
<span></span>
<img src="/static/home/hot/h1.jpg" alt="">
</div>
景点标题
1
<h5 class="van-ellipsis">景点标题</h5>
line-price:价格
1
2
3
<div class="line-price">
<span class="price">￥67</span>起
</div>
3、样式
1
2
3
4
<style lang="less">
.home-hot-box{ // 写入大类里，防止覆盖
...
}
热门框的宽度和样式
1
2
3
4
5
6
.box-main{
width: 100%; // 宽度100%
display: flex;
padding-top: 10px; // 滚动条
overflow-x: scroll; // 水平滚动条
}
单个热门景点的样式
1
2
3
4
5
6
7
8
9
.hot-item {
display: flex;
flex-direction: column; // 横向
width: 100px;
margin-right: 10px;
padding-bottom: 10px;
...
}
图片样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.img {
position: relative;
span {
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 42px;
height: 20px;
z-index: 10;
}
img {
width: 100px;
height: 100px;
}
}
标题样式
1
2
3
4
5
h5 {
color: #212121;
padding: 2px 0;
font-size: 12px;
}
价格样式
1
2
3
4
5
6
7
8
.line-price {
color: #212121;
font-size: 12px;
.price {
color: #f50;
font-size: 13px;
}
}
Top标签的样式（伪类选择器）
1
2
3
4
5
6
7
8
9
10
11
12
13
// 伪类选择器
&:nth-child(1) .img span {
background: url(../../../public/static/home/hot/top1.png) no-repeat;
background-size: 100% auto;
}
&:nth-child(2) .img span {
background: url(../../../public/static/home/hot/top2.png) no-repeat;
background-size: 100% auto;
}
&:nth-child(3) .img span {
background: url(../../../public/static/home/hot/top3.png) no-repeat;
background-size: 100% auto;
}
4、Home页面中引用轮播图组件(@/views/HomeView)
引入组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
// banner
import Banner from '@/components/home/BannerBox'
// hot
import Hot from '@/components/home/HotBox'
export default {
name: 'HomeView',
components: {
// banner
Banner，
// hot
Hot
}
}
</script>
展示
1
2
3
4
5
6
7
8
<template>
<div class="home">
<!-- banner -->
<Banner/>
<!-- hot -->
<Hot/>
</div>
</template>
5、填充数据
data中创建用于存放对象的数组
1
2
3
4
5
6
7
8
9
10
<script>
export default {
data() {
return {
dataList: []
}
},
...
}
</script>
将数据放入data
1
2
3
4
5
6
7
8
9
10
11
12
13
14
created () {
this.dataList = [
{id: 1, img: '/static/home/hot/h1.jpg', name: '景点名称', price: 65},
{id: 2, img: '/static/home/hot/h2.jpg', name: '景点名称景点名称', price: 65},
{id: 3, img: '/static/home/hot/h3.jpg', name: '景点名称景点名称景点名称', price: 65},
{id: 4, img: '/static/home/hot/h4.jpg', name: '景点名称', price: 65},
{id: 5, img: '/static/home/hot/h5.jpg', name: '景点名称', price: 65},
{id: 6, img: '/static/home/hot/h6.jpg', name: '景点名称', price: 65},
{id: 7, img: '/static/home/hot/h7.jpg', name: '景点名称', price: 65},
{id: 8, img: '/static/home/hot/h8.jpg', name: '景点名称', price: 65},
{id: 9, img: '/static/home/hot/h9.jpg', name: '景点名称', price: 65},
{id: 10, img: '/static/home/hot/h10.jpg', name: '景点名称', price: 65},
]
}
删去模板中多余的a标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 景点列表 -->
<div class="box-main">
<a href="#" class="hot-item"
v-for="item in dataList"
:key="item.id">
<div class="img">
<span></span>
<img :src="item.img" alt="">
</div>
<h5 class="van-ellipsis"></h5>
<div class="line-price">
<span class="price">￥</span>起
</div>
</a>
</div>
<!-- // 景点列表 -->
6、优化样式
标题和价格之间的间距太大
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style lang="less">
.home-hot-box{
...
.hot-item {
...
h5 {
color: #212121;
padding: 2px 0;
font-size: 12px;
margin: 0 // 不留间隔
}
}
}
</style>
景点照片两边紧贴边缘不好看
1
2
3
4
5
6
<style lang="less">
.home-hot-box{
padding: 0 10px; // 给与10像素间隔
...
}
</style>
小火苗图标没有对齐景点照片（重写给定样式）
1
2
3
4
5
6
7
8
9
<style lang="less">
.home-hot-box{
...
.van-cell{
padding: 10px 0; // 给与10像素间隔
...
}
}
</style>
###