本文为横向轮播,纵向轮播/动态列表组件请戳----

代码是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-根据数据量自动横向滚动,鼠标划入停止滚动的更多相关文章

  1. vue实例之组件开发:图片轮播组件

    一.普通方式: 其中,index是关键. <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  2. vue 专题 vue2.0各大前端移动端ui框架组件展示

    Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...

  3. C-Swipe Mobile 一个适用于Vue2.x的移动端轮播组件

    近期在做的一个Vue2项目里需要一个可以滑动的轮播组件,但是又因为现有的传统轮播库功能过于繁琐和笨重.因此自己写了一个针对于Vue2.x的轻型轮播组件. 项目GitHub链接:C-Swipe Mobi ...

  4. Vue.js的动态组件模板

    组件并不总是具有相同的结构.有时需要管理许多不同的状态.异步执行此操作会很有帮助. 实例: 组件模板某些网页中用于多个位置,例如通知,注释和附件.让我们来一起看一下评论,看一下我表达的意思是什么.评论 ...

  5. vue通过extend动态创建全局组件(插件)学习小记

    测试环境:nodejs+webpack,例子是看文章的,注释为自己的理解 创建一个toast.vue文件: <template> <div class="wrap" ...

  6. vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

  7. Vue把父组件的方法传递给子组件调用(评论列表例子)

    Vue把父组件的方法传递给子组件调用(评论列表例子) 效果展示: 相关Html: <!DOCTYPE html> <html lang="en"> < ...

  8. Vue动态注册异步组件(非同一个工程的组件)

    前言:最近在掘金逛的时候,无意中看到前滴滴前端架构黄轶大佬,看到了大佬分享的一篇博客滴滴 webapp 5.0 Vue 2.0 重构经验分享 ,对于其中第5个问题(异步加载的业务线组件,如何动态注册? ...

  9. 如何在vue中修改动态标签中的样式和修改组件库样式

    vue中修改动态标签中的样式和修改组件库样式 因为vue中的标签在渲染的时候,都会给标签加上id 所以你想在<style lang="scss" scoped>直接修改 ...

  10. Vue3组件(九)Vue + element-Plus + json = 动态渲染的表单控件

    一个成熟的表单 表单表单,你已经长大了,你要学会: 动态渲染 支持单列.双列.多列 支持调整布局 支持表单验证 支持调整排列(显示)顺序 依据组件值显示需要的组件 支持 item 扩展组件 可以自动创 ...

随机推荐

  1. 解决ffmpeg的播放摄像头的延时优化问题(项目案例使用有效)

    在目前的项目中使用了flv的播放摄像头的方案,但是延时达到了7-8秒,所以客户颇有微词,没有办法,只能开始优化播放延时的问题,至于对接摄像头的方案有好几种,这种咱们以后在聊,今天只要聊聊聊优化参数的问 ...

  2. 二十八、Helm

    使用Helm3管理复杂应用的部署 认识Helm 为什么有helm? Helm是什么? kubernetes的包管理器,"可以将Helm看作Linux系统下的apt-get/yum" ...

  3. 修复 docker build 错误 "ERROR: No build stage in current context"

    若 docker build 时遇到了错误 "ERROR: No build stage in current context",则有可能是没有将 FROM 命令语句放置在第一行. ...

  4. dfs 序

    dfs序可以\(O(1)\)判断书上两个点的从属关系 Tree Queries 题面翻译 给你一个以\(1\)为根的有根树. 每回询问\(k\)个节点\({v_1, v_2 \cdots v_k}\) ...

  5. C温故补缺(十二):预编译器与头文件

    预编译器 预编译器就是之前学的预编译指令的执行者 gcc -E test.c -o test.i 生成预编译文件就是翻译#指令 比如#include<stdio.h>就是把整个stdio. ...

  6. Kubernetes(K8S) 配置管理-ConfigMap 介绍

    作用:存储不加密数据到 etcd,让 Pod 以变量或者 Volume 挂载到容器中 场景:配置文件 创建配置文件 redis.properties redis.host=127.0.0.1 redi ...

  7. 使用.NET7和C#11打造最快的序列化程序-以MemoryPack为例

    译者注 本文是一篇不可多得的好文,MemoryPack 的作者 neuecc 大佬通过本文解释了他是如何将序列化程序性能提升到极致的:其中从很多方面(可变长度.字符串.集合等)解释了一些性能优化的技巧 ...

  8. Kafka教程(一)基础入门:基本概念、安装部署、运维监控、命令行使用

    Kafka教程(一)基础入门   1.基本概念   背景   领英->Apache   分布式.消息发布订阅系统   角色   存储系统   消息系统   流处理平台-Kafka Streami ...

  9. 【每日一题】【二分mid&贪心】2022年2月8日-NC163 最长上升子序列(一)

    1.描述给定一个长度为 n 的数组 arr,求它的最长严格上升子序列的长度.所谓子序列,指一个数组删掉一些数(也可以不删)之后,形成的新数组.例如 [1,5,3,7,3] 数组,其子序列有:[1,3, ...

  10. USB限流IC,限流开关保护芯片

    PW1503和PW1502是超低RDS(ON)开关,具有可编程电流限制的USB限流IC,以保护电源于过电流负载和正极负极短路的保护.它具有过温保护以及反向闭锁功能. PW1503,PW1502均采用S ...