更新时间：2023-02-09 GMT+08:00
app-preview-sideslip组件
HTML
<div class="Sideslip" [style]="item.style">
<div class="Sideslip-scroll" [style]="{ width: sideslipList.length * 210 + 16 * (sideslipList.length - 1) + 'px' }">
<div
// ngFor为循环指令
*ngFor="let list of sideslipList; index as i"
class="Sideslip-box"
(click)="changeIndex(i)"
[class]="{
active: i === activeIndex
}"
>
<div class="Sideslip-file">
<img
[src]="list.src"
alt=""
[style]="{ height: (208 * proportionM) / proportionD + 'px' }"
(click)="handlerAction(i)"
/>
</div>
<div class="Sideslip-title" [innerHTML]="list.title"></div>
<div *ngIf="item.contentShow" class="Sideslip-cotent" [innerHTML]="list.content |"></div>
<div *ngIf="list.buts.length > 0" class="Sideslip-buts" (click)="handlerAction(i)">
<div *ngFor="let item1 of list.buts" class="Sideslip-but">
{{ item1.text }}
</div>
</div>
</div>
</div>
</div>
CSS
Sideslip {
position: relative;
overflow-x: auto;
overflow-y: hidden;
.Sideslip-scroll {
position: absolute;
left: 0;
top: 0;
.Sideslip-box {
display: inline-block;
margin-right: 16px;
width: 210px;
border: 1px solid #c9c9c9;
border-radius: 8px;
overflow: hidden;
background-color: #fff;
box-sizing: border-box;
cursor: pointer;
&.active {
border-color: #5e7ce0;
}
&:last-of-type {
margin-right: 0;
}
.Sideslip-file {
img {
width: 208px;
}
}
.Sideslip-title {
color: #333;
min-height: 20px;
line-height: 20px;
font-size: 15px;
margin-left: 12px;
margin-bottom: 8px;
margin-top: 8px;
padding-right: 4px;
box-sizing: border-box;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.Sideslip-cotent {
color: #666;
height: 36px;
line-height: 18px;
font-size: 12px;
margin-left: 12px;
margin-bottom: 14px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.Sideslip-buts {
width: 100%;
padding-bottom: 15px;
box-sizing: border-box;
.Sideslip-but {
text-align: center;
width: 80%;
margin: 0 auto;
height: 40px;
line-height: 40px;
border-radius: 20px;
background-color: #007dff;
color: #fff;
font-size: 17px;
}
}
}
}
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track-piece {
background-color: none;
background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb:vertical {
height: 8px;
background: rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:horizontal {
width: 8px;
background: rgba(0, 0, 0, 0.5);
}
JavaScript
import { PreviewService }
// 自定义的一些参数
sideslipList = [];
proportionM = 1;
proportionD = 1;
activeIndex = 0;
sideboxElements;
// 初始化数据
ngOnInit() {
this.sideslipList = this.item?.sideslip?.sideslipList || [];
this.activeIndex = this.item?.sideslip?.sideslipList || 0;
// 获取dom节点
this.sideboxElements = this..getElementsByClassName('Sideslip-box');
}
// 切换事件
changeIndex(index) {
let element = this.sideboxElements[index];
element.scrollIntoView({ inline: 'start' });
this.activeIndex = index;
}
handlerAction(index) {
let current = this.sideslipList[index];
this.previewService.emit(current.buts[0].event);
}
}
父主题： 子组件代码示例
