Angular 实现列表自动滚动

前言

实现新闻列表自动滚动,类似中奖名单那种滚动,目前 js 实现的方式还是有很多相关代码的,不过这里使用 Angular 实现,其实原理差不多,正好业务需要,在此记录下如何实现。

正文

实现思路:
1. 获取页面的元素操作其滚动条
2. 当滚动条距离底部还有 10 个像素内,需要将滚动列表再次追加
3. 当追加次数过多时,需要重新开始,防止页面卡顿(这也是体验不好的地方,如果有其他更好的方案欢迎留言)
HTML:
  • 定义一个 div 并设置宽高
  • 设置是否可以手动滚动 根据鼠标移入移出来决定
<div #scroller class="scroller-css" [ngStyle]="{'overflow': scrollerOverflow}" (mouseenter)="mouseEnterScroll()" (mouseleave)="mouseLeaveScroll()">
    <div *ngFor="let item of list">
      <!-- 列表显示内容 -->
      <div>{{ item }} ------- {{ item }}</div>
    </div>
</div>
CSS:
  • 设置内部 div 的高度及定位
.scroller-css {
  position: relative;
  height: 200px;
}
/** 隐藏滚动条 */
.scrollerCss::-webkit-scrollbar { width: 0 !important } 
TS:
// 数据列表,可以从接口获取
list = ['test', 'temp', 'demo', 'test', 'temp', 'demo', 'test', 'temp', 'demo'];
// 记录最原始的数据列表,保证数据不会被更新掉
listOrigin = [];
// 滚动列表
@ViewChild('scroller', {static: false}) scroller: ElementRef;
// 是否允许手动滚动
scrollerOverflow: string = 'hidden';
timer: any;
// 获取数据列表,如果是服务器获取数据,可以在获取完数据后执行
getList() {
    this.listOrigin = [...this.list];
    this.scrollerFn();
}
// 初始化获取数据
ngOnInit () {
  this.getList();
}

// 当组件销毁时,移除定时器
ngOnDestroy(): void {
    clearInterval(this.timer);
}
// 滚动列表方法
scrollerFn() {
    // 获取页面元素
    const element = this.scroller.nativeElement;
    // 记录列表追加次数
    let times = 1;
    // 开始循环滚动
    this.timer = setInterval(() => {
        element.scrollTop++;
        const marginBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
        // 如果当前滚动到底 10px 时追加数据
        if (marginBottom < 10) {
            this.list.push(...this.listOrigin);
            times++;
        }
        // 如果追加了 10 次以上,重新开始滚动,防止页面元素过多,这就是为什么需要另外一个变量的原因
        if (times > 10) {
            this.list = [...this.listOrigin];
            element.scrollTop = 0;
            times = 1;
        }
    }, 50); // 50 ms 滚动一次,基本是平滑滚动,再大一点就有点卡卡的感觉了
}
// 鼠标移入停止滚动
mouseEnterScroll() {
  clearInterval(this.timer);
  // 允许手动滚动
  this.scrollerOverflow = 'auto';
  this.scroller.nativeElement.scrollTop = 0;
  this.list = [...this.listOrigin];
}
// 鼠标移出开始滚动
mouseLeaveScroll() {
  this.scrollerFn();
  // 采用自动滚动,隐藏滚动条
  this.scrollerOverflow = 'hidden';
}

转载自:https://blog.csdn.net/qq_37638959/article/details/105852868

 
上一篇:Angular 开发配置代理


下一篇:CSS clear 清除浮动,兼容各浏览器