vue自动滚动组件可以支持鼠标滚轮操作

<!--
*@AutoScrollList
*@author GYY
*@date 2022/7/20 11:22
-->
<template><div ref="scrollMain" class="auto-scroll-list-main" @click="autoScrollClick($event)":key="keyValue" @mouseover="mEnter" @mouseleave="mLeave"><div ref="scrollItemBox" class="seamless-warp-box" ><slot/></div><div v-html="copyHtml" class="seamless-warp-box"></div></div>
</template><script>export default {name: 'AutoScrollList',props: {listData: {type: Array},isPause: {type: Boolean,default: false},keyValue: { type: [String,Number], default: '' }},mounted() {// 如果列表数据是异步获取的，记得初始化在获取数据后再调用//this.initScroll()},data() {return {scrollTop: 0, //列表滚动高度speed: 70, //滚动的速度copyHtml: null,scrollInterval: null,}},watch: {isPause(newValue, _) {if (newValue) {this.mEnter()} else {this.mLeave()}},listData:{deep:true,immediate:false,handler(newValue, _) {this.mEnter()this.initScroll()}},},methods: {initScroll() {this.$nextTick(() => {this.copyHtml = this.$refs.scrollItemBox.innerHTMLthis.startScroll()})},// 鼠标移入停止滚动mEnter() {if (this.scrollInterval) {clearInterval(this.scrollInterval)this.scrollInterval=null}},// 鼠标移出继续滚动mLeave() {this.startScroll()},// 开始滚动startScroll() {//在当前位置开始滚动this.scrollTop=this.$refs.scrollMain.scrollTopthis.scrollInterval = setInterval(this.scroll, this.speed)},// 滚动处理方法scroll() {this.scrollTop=this.scrollTop+1this.$refs.scrollMain.scrollTop=this.scrollTop// 获取需要滚动的盒子的高度let scrollItemBox = this.$refs.scrollMain.scrollHeight/2// 当判断滚动的高度大于等于盒子高度时，从头开始滚动if (this.scrollTop >= scrollItemBox) {this.scrollTop = 0}},autoScrollClick(e) {let index = e.target.dataset.indexif (index === undefined) {return}//默认是number 自己改this.$emit('autoScrollClick', Number(index))}},destroyed(){this.mEnter()}
}
</script><style lang="scss" scoped>
.auto-scroll-list-main {overflow: auto;height: 100%;
}.auto-scroll-list-main::-webkit-scrollbar {display: none
}.seamless-warp-box {width: 100%;
}
</style>

vue自动滚动组件可以支持鼠标滚轮操作相关推荐

【uni-app】swiper 实现纵向轮播，且支持鼠标滚轮滚动翻页
前言 swiper 实现纵向轮播,且支持鼠标滚轮滚动翻页操作方法(亲测可用) https://www.w3h5.com/post/607.html
vue 文字上下循环滚动_基于 Vue 无缝滚动组件Vue-Seamless-Scroll
今天给小伙伴们推荐一款超棒的Vue无缝滚动组件VueSeamlessScroll. vue-seamless-scroll 基于 vue.js 构建的简单实用的无缝滚动组件.满足丰富的配置需求,支持上 ...
jQuery 3D圆盘旋转焦点图支持鼠标滚轮
之前我们分享过很多炫酷实用的jQuery焦点图插件了,今天介绍的这款jQuery焦点图非常特别,所有图片围成一个圆圈,组成一个立体视觉的圆盘,并且可以旋转选择圆盘中的图片.另外,这款jQuery 3D ...
微软鼠标支持linux吗,微软发布终端管理应用Windows Terminal新测试版终于支持鼠标进行操作...
Windows Terminal是微软此前推出的终端管理软件 , 支持多种不同的连接协议并且可以调用 Linux 子系统操作. 在此前更新中该软件其实已经获得许多非常实用的新功能,但是微软始终没有支持 ...
VB6.0不支持鼠标滚轮的解决办法
由于VB6.0对鼠标滚轮不支持,往往给大家的工作和学习带来很多不方便,发生此问题是因为 Visual Basic 6.0 IDE 没有对通过使用鼠标轮滚动内置支持,微软官方给出了两种方法,大家都可以试 ...
Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果
Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...
html鼠标滚轮不滚动页面,Windows10系统鼠标滚轮无法滚动页面如何解决
如果遇到界面无法全部显示情况的话,那么win10系统用户就可以使用鼠标滚轮进行滚动翻页,方便阅读.不过,也有一些朋友会碰到无法在原本可以翻页的界面中使用鼠标滚轮翻页的问题,这是怎么回事呢?我们该如何操 ...
【canvas教程】实现画布拖动、定点缩放，支持手势与鼠标滚轮操作
效果展示: 实现原理: 1.求实现定点缩放所需的位移值定点缩放:从图中选取某点(参照物)为中心点进行缩放,缩放时无论图像怎么变化,该点位置始终固定不变. 有想深入了解实现原理的,不妨试着做一下我下面 ...
vue antd a-table组件设置表头鼠标移入悬浮显示（自定义的表头）
1.看之前,请先异步另一篇文章 antdv table组件封装成全局组件以及携带自定义表头展示 2.具体需求,鼠标移入显示文本 3.参考大佬的文章:a-table组件设置表头鼠标移入悬浮显示 4.在公 ...

vue自动滚动组件可以支持鼠标滚轮操作

vue自动滚动组件可以支持鼠标滚轮操作相关推荐

最新文章

热门文章

vue自动滚动组件 可以支持鼠标滚轮操作

vue自动滚动组件 可以支持鼠标滚轮操作相关推荐

最新文章

热门文章

vue自动滚动组件可以支持鼠标滚轮操作

vue自动滚动组件可以支持鼠标滚轮操作相关推荐