VUE Angular通用动态列表组件-亦可为自动轮播组件-02-根据数据量自动横向滚动,鼠标划入停止滚动
2021/7/8 23:37:07
本文主要是介绍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); } } }
这篇关于VUE Angular通用动态列表组件-亦可为自动轮播组件-02-根据数据量自动横向滚动,鼠标划入停止滚动的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist
- 2024-03-11icons for vue
- 2024-03-07breadcrumbs react js
- 2024-03-06react login page example
- 2024-03-06react router uselocation
- 2024-03-04postgres jsonb_set