This article shares with you a detailed explanation of Vue's seamless scrolling component. I have never found Vue's seamless scrolling component on awesome. I wrote a component after work and shared it with you in the hope that everyone can learn and progress together.
npm install vue-seamless-scroll --save
The following es6 usage requires webpack environment compilation.
For details, please refer to example-src/App.vue
import Vue from 'vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
new Vue({
components: {
vueSeamlessScroll
}
})Example:
For details, please refer to test/test.html
<html>
<head>
...
</head>
<body>
<p id="app">
<vue-seamless-scroll></vue-seamless-scroll>
</p>
<script src="vue.js"></script>
<script src="vue-seamless-scroll"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html> defaultOption () {
return {
step: 1, //步长 越大滚动速度越快
limitMoveNum: 5, //启动无缝滚动最小数据量 this.dataList.length
hoverStop: true, //是否启用鼠标hover控制
direction: 1, //1 往上 0 往下
openWatch: true, //开启data实时监听
singleHeight: 0, //单条数据高度有值hoverStop关闭
waitTime: 1000 //单步停止等待时间
}
}vue-seamless-scroll If you find a bug or have any shortcomings, please give me some advice. If you feel good, give it a star.
Related recommendations:
Based on the scroll bar A simple example of position judgment_javascript skills
css code example to implement hidden scroll bar
The above is the detailed content of Detailed explanation of Vue's seamless scrolling component. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
