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);
    }
  }
}