VUE Angular通用动态列表组件-亦可为自动轮播组件-02-根据数据量自动横向滚动,鼠标划入停止滚动
2024-09-07 02:37:07
本文为横向轮播，纵向轮播/动态列表组件请戳----
代码是angular的，稍微改改就可以放入Vue项目里，差别不大哟
以下代码可以根据实际情况自行调整
父组件html
<app-scroll-left>
<div class="slot-one">
<div [style]="{ width: dataObjLeft.width + dataObjLeft.unit }" class="inner_item"
*ngFor="let item of dataObjLeft.scrollList,index as i">
{{ item }}嵌入的slot{{ i+1 }}
</div>
</div>
<div class="slot-two">
<div [style]="{ width: dataObjLeft.width + dataObjLeft.unit }" class="inner_item">
{{ dataObjLeft.scrollList[0] }}嵌入的slot2,这里要放和 slot1里面第一个画面一模一样的东西
</div>
</div>
</app-scroll-left>
父组件ts
dataObjLeft: any = {
time: 50,
minLength: 1,
width:200,
height: 200,
unit: 'px',
scrollList: ['1111','2222','3333','444','555','666']
}
子组件html
<div
class="scroll_outermost"
[style]="{ width: dataObj.width + dataObj.unit, height: dataObj.height + dataObj.unit }"
#outerMost
(mouseover)="rollStop('over')"
(mouseout)="rollStart(60)"
>
<div [style]="{ width: (dataObj.scrollList.length + 1) * dataObj.width + dataObj.unit, height: '100%' }">
<div class="outer_box" [style]="{ width: dataObj.scrollList.length * dataObj.width + dataObj.unit }" #outerBox1>
<ng-content select=".slot-one"></ng-content>
</div>
<div class="outer_box" #outerBox2>
<ng-content select=".slot-two"></ng-content>
</div>
</div>
</div>
子组件ts
import { Component, ElementRef, OnInit, Input, ViewChild, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-scroll-left',
templateUrl: './scroll-left.component.html',
styleUrls: ['./scroll-left.component.less'],
encapsulation: ViewEncapsulation.Emulated,
})
export class ScrollLeftComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
@Input()
public dataObj: any = {
time: 50,
minLength: 1,
width:200,
height: 200,
unit: 'px',
scrollList: ['1111','2222','3333','444','555','666']
}
@ViewChild('outerMost', { static: false }) outerMost: ElementRef;
@ViewChild('outerBox1', { static: false }) outerBox1: ElementRef;
@ViewChild('outerBox2', { static: false }) outerBox2: ElementRef;
ngAfterViewInit() {
setTimeout(()=>{this.roll(this.dataObj.time)},1000)
}
timer = null
ngOnDestroy() {
if (this.timer) clearInterval(this.timer);
}
roll(t) {
var outerMost = this.outerMost.nativeElement
if (this.dataObj.scrollList.length < this.dataObj.minLength) { return console.log('不需要滚动') }
outerMost.scrollLeft = 0;
this.rollStart(t);
}
rollStart(t) {
var outerMost = this.outerMost.nativeElement
var outerBox1 = this.outerBox1.nativeElement
this.rollStop('开始');
this.timer = setInterval(() => {
// 当滚动高度大于列表内容高度时恢复为0
outerMost.scrollLeft++;
if (outerBox1.scrollWidth - outerMost.scrollLeft === 1) {
outerMost.scrollLeft = 0;
outerMost.scrollLeft++;
}
if (outerMost.scrollLeft >= outerBox1.scrollWidth) {
outerMost.scrollLeft = 0;
outerMost.scrollLeft++;
}
}, t);
}
rollStop(e) {
console.log(e)
clearInterval(this.timer);
}
}
子组件less
.scroll_outermost {
overflow: hidden; /* 必须 */
cursor: pointer;
.outer_box {
height: 100%;
display: inline-block;
vertical-align: top;
/deep/.slot-one{
height: 100%;
}
/deep/.slot-two{
height: 100%;
}
/deep/.inner_item {
height: 100%;
display: inline-block;
background-color: rgb(235, 210, 243);
}
/deep/.inner_item:nth-child(odd) {
background-color: rgb(179, 223, 248);
}
}
}
最新文章
- 【组织级项目管理】P2 MSP P3O
- PHP命名规范
- C++ const用法 尽可能使用const [转载]
- C# 指定物理目录下载文件，Response.End导致“正在中止线程”异常的问题
- PQ格式化虚拟机硬盘如何生效
- Android 横屏时禁止输入法全屏
- 【开发实例】C#调用SAPI实现语音合成的两种方法
- 我的VisualStudio工具箱
- 深入.net平台和c#编程 学习笔记
- 7、装饰模式（Decorator）
- win10/win7下不通过winmanager整合NERDTree和Tagbar的gVim8.0配置
- SharePoint 搜索爬网第三方网站配置
- 散列表(has table、哈希表)
- CentOS 7 安装Kubernetes（单机版）
- MVC 自定义 错误页面
- zookeeper安装(Linux)
- 自己实现字符串转整数(不使用JDK的字符串转整数的方法)
- Structs复习 命名空间
- Python开发简单爬虫
- bzoj1091