VUE Angular通用动态列表组件-亦可为自动轮播组件-02-根据数据量自动横向滚动,鼠标划入停止滚动
时间:2021-07-08
本文章向大家介绍VUE Angular通用动态列表组件-亦可为自动轮播组件-02-根据数据量自动横向滚动,鼠标划入停止滚动,主要包括VUE Angular通用动态列表组件-亦可为自动轮播组件-02-根据数据量自动横向滚动,鼠标划入停止滚动使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文为横向轮播,纵向轮播/动态列表组件请戳----
代码是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);
}
}
}
原文地址:https://www.cnblogs.com/sugartang/p/14977929.html
- ElasticSearch优化系列二:机器设置(内存)
- Tensorflow之 CNN卷积神经网络的MNIST手写数字识别
- 你听过算法也是可以贪心的吗?
- 前后端分离ueditor富文本编辑器的使用-Java版本
- Golang语言社区--Go语言基础第六节函数
- Golang语言社区--理解 go interface 的 5 个关键点
- 得到一个物种所有基因的TSS(转录起始位点)区域的bed文件。
- 如何选择聚类模块数目
- 谁能告诉我,这数据测毁了么?
- 计算资源及编程-仅针对生信人员
- 从WGS测序得到的VCF文件里面提取位于外显子区域的【直播】我的基因组84
- 基因组重测序的unmapped reads assembly探究 【直播】我的基因组86
- Centos 下非 Root 安装 Microsoft R Open
- 下载TCGA所有癌症的maf文件做signature分析
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法