Vue 列表平滑滚动
1. 使用插件
vue-seamless-scroll
网址:https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default
配置参数: defaultOption () { return { step: 0.2, // 数值越大速度滚动越快 limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length hoverStop: true, // 是否开启鼠标悬停stop direction: 1, // 0向下 1向上 2向左 3向右 openWatch: true, // 开启数据实时监控刷新dom singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 waitTime: 1000 // 单步运动停止的时间(默认值1000ms) } }
2.自我简单实现
export default { data() { return { scrollTimer: null } }, methods: { scrollFn({ className = '', timeout = 50, speed = 1 }) { if (!className) { return } const dom = document.querySelector('.' + className) const clientHeight = dom.clientHeight const scrollHeight = dom.scrollHeight const scroll = scrollHeight - clientHeight if (scroll === 0) { return } if (this.scrollTimer) { this.pauseTimer() } dom.addEventListener('mouseenter', this.pauseTimer) dom.addEventListener('mouseleave', () => { this.scrollFn({ className, timeout, speed }) }) this.scrollTimer = setInterval(() => { const temp = dom.scrollTop + speed dom.scrollTop = temp if (scroll <= temp) { dom.scrollTop = 0 } }, timeout) }, pauseTimer() { clearInterval(this.scrollTimer) this.scrollTimer = null } } }
使用:
this.scrollFn({ className: 'list-box', // 容器class timeout: 16.66666 // 速率 })