[TOC]
根据数据进⾏布局设置，并绑定数据
// CourseContentList.vue
<van-list
v-model=“loading“
:finished=“finished“
finished-text=“没有更多了”
@load=“onLoad“
>
<van-cell
v-for=”item in list“
:key=”item.id“
>
<div>
<img :src=“item.courseImgUrl || item.image“alt=“”>
</div>
<divclass=“course-info”>
<h3v-text=“item.courseName || item.name“></h3>
<pclass=“course-preview”v-html=“item.previewFirstField“></p>
<p
v-if=“item.price“
class=“price-container”
>
<spanclass=“course-discounts”>￥{{item.discounts}}</span>
<sclass=“course-price”>￥{{item.price}}</s>
</p>
</div>
</van-cell>
</van-list>
<stylelang=“scss”scoped>
.course-content-list {
position: fixed;
left: 0;
right: 0;
top: 220px;
bottom: 50px;
overflow-y: auto;
}
// 课程条目设置flex，内部元素左右显示
.van-cell__value {
height: 100px;
padding: 10px 0;
display: flex;
}
// 左侧图设置固定尺寸
.van-cell__valueimg {
width: 75px;
height: 100%;
border-radius: 5px;
}
// 右侧内容区域 flex: 1 撑满父元素
.course-info {
flex: 1;
padding: 0 10px;
display: flex;
flex-direction: column;
}
.course-info .course-preview {
flex-grow: 1;
}
.course-info .course-discounts {
color: #ff7452;
margin-right: 10px;
}
p, h3 {
margin: 0;
}
</style>
若有收获，就点个赞吧
0 人点赞
