网站建设思维导图,新闻类网站怎么做seo,高大上的广告公司名字,wordpress发布文章_发布Vue3 实现一个无缝滚动组件#xff08;支持鼠标手动滚动#xff09;
前言
在日常开发中#xff0c;经常遇到需要支持列表循环滚动展示#xff0c;特别是在数据化大屏开发中#xff0c;无缝滚动使用频率更为频繁#xff0c;在jquery时代#xff0c;我们常用的无缝滚动组…Vue3 实现一个无缝滚动组件支持鼠标手动滚动
前言
在日常开发中经常遇到需要支持列表循环滚动展示特别是在数据化大屏开发中无缝滚动使用频率更为频繁在jquery时代我们常用的无缝滚动组件为liMarquee在vue中已经有vue-seamless-scroll组件通过Vue2实现不支持鼠标手动滚动但是在使用过程中发现滚动后会存在点击事件失效的问题并且产品提了个需求需要支持鼠标手动滚动也要支持自动滚动于是痛定思痛决定通过Vue3来实现该功能该组件已经实现上传npm可以直接安装使用链接在文尾。
实现
html部分
首先写一个基础的list结构通过插槽接收外部传入的list数据因为需要实现无缝滚动需要复制出同一份的Dom在最外层监听鼠标hover和leave的状态以实现鼠标hover暂停滚动绑定鼠标滚动事件在鼠标滚动时记住滚动的位置在恢复自动滚动时能从当前滚动位置继续滚动。
div classcustom-list refscrollBody mouseentermouseenterFunc mouseleavemouseleaveFuncmousewheelmousewheelFuncdiv classlist-body :class{list-body2: isHorizontal} reflistBody :style{ transform: getScrollDistance() }slot/slot/divdiv classlist-body :class{list-body2: isHorizontal} reftBody v-ifisCanScroll :style{ transform: getScrollDistance() }slot/slot/div
/div实现逻辑
开始
通过父级传入的isHorizontal判断是横向滚动还是垂直滚动
const start () {//判断是否可以滚动函数let isScrollFunc (bodySize:number, listSize:number) {if (bodySize listSize) {scrollDistance.value 0;isCanScroll.value !1;}};isStop.value !1;//判断是否可以滚动if (!isHorizontal.value) {isScrollFunc(bodyHeight.value, listHeight.value);} else {isScrollFunc(bodyWidth.value, listWidth.value);}if (isCanScroll.value) {run();}
}开始滚动
计算目前滚动的距离并判断需要滚动的方向计算下一步滚动的距离。
const run () {//清空动画clearAnimation();animationFrame.value window.requestAnimationFrame(() {//滚动主逻辑函数let main (listSize:number, bodySize:number) {let tempScrollDistance Math.abs(scrollDistance.value);if (scrollDistance.value 0) {let cc 2 * listSize - bodySize;if (tempScrollDistance cc) {scrollDistance.value -(listSize - bodySize);}} else {scrollDistance.value -listSize;}};//根据滚动方向判断使用高度或宽度控制效果if (!isHorizontal.value) {main(listHeight.value, bodyHeight.value);} else {main(listWidth.value, bodyWidth.value);}//判断滚动值if (!isStop.value) {if (props.scrollDirection top ||props.scrollDirection left) {scrollDistance.value - props.steep;} else if (props.scrollDirection bottom ||props.scrollDirection right) {scrollDistance.value props.steep;}run();}});
}获取滚动样式
通过translate实现列表平移已实现平滑滚动。
const getScrollDistance () {let style;if (!isHorizontal.value) {style translate(0px, scrollDistance.value px);} else {style translate( scrollDistance.value px,0px);}return style;
}
const clearAnimation () {if (animationFrame.value) {cancelAnimationFrame(animationFrame.value);animationFrame.value null;}
}
鼠标滚动
鼠标滚动时实时计算滚动的距离可通过传入的鼠标滚动速率来计算每次滚动多少。
const mousewheelFunc (e:any) {if (!isCanScroll.value || !props.isRoller) {return false;}let dis e.deltaY;if (dis 0) {scrollDistance.value - props.rollerScrollDistance;} else {scrollDistance.value props.rollerScrollDistance;}run();
}使用
该组件已上传npm仓库欢迎satrt使用
npm install fcli/vue-auto-scroll --save-dev 来安装在项目中使用
import VueAutoScroll from fcli/vue-auto-scroll;
const appcreateApp(App)
app.use(VueAutoScroll);
使用示例 div classcontentvue-auto-scroll :datalist :steep0.5 scrollDirectiontop :isRollertrue :rollerScrollDistance50div classli v-fori in list :keyi{{ i }}/div/vue-auto-scroll
/div
属性属性名称类型可选值steep滚动的速率number为正数即可scrollDirection滚动的方向stringtop ,bottom,left,rightisRoller是否可以使用滚轮滚动booleantrue,falserollerScrollDistance滚轮滚动的速率numberisRoller 必须为 true为正数即可data接收异步数据array同步任务可不传
注 当scrollDirection 为top或bottom时一定要为 vue-auto-scroll 组件设置高度。 当scrollDirection 为left或right时一定要为 vue-auto-scroll 组件设置宽度。并为嵌入vue-auto-scroll中的标签设置样式为display:inline-block; 示例样式名为list-item可以更改为其他类名。当scrollDirection 为left或right时,是基于行内元素的“white-space: nowrap;” 来控制强制不换行的。有可能会影响其内部的文字排列。可以在list-item 层添加 white-space: normal; 来处理给问题。并为其添加固定宽度以保证文字可以正常换行及插件的正确计算与显示。如果没有为其添加固定宽度会造成插件获取父容器层的宽度值错误导致显示混乱
git地址https://gitee.com/fcli/vue-auto-scroll.git
