这篇文章主要介绍了一个基于 vue.js 无缝滚动效果, 文中给大家介绍的非常详细, 具有参考借鉴价值, 需要的朋友可以参考下
一个简单的基于 vue.js 的无缝滚动
:feet: 在线文档 demo :ear_of_rice: 小 demo :blue_book:English Document
安装
- NPM
- npm install vue-seamless-scroll --save
使用
ES6
详情的 demo 页面 example-src/App.vue
- // **main.js**
- import Vue from 'vue'
- import scroll from 'vue-seamless-scroll'
- Vue.use(scroll)
- <template>
- <vue-seamless-scroll></vue-seamless-scroll>
- </template>
- // 或者你可以自己设置全局注册的组件名 默认注册的组件名是 vue-seamless-scroll
- Vue.use(scroll,{componentName: 'scroll-seamless'})
- <template>
- <scroll-seamless></scroll-seamless>
- </template>
普通的使用方法 (script 标签引入)
Example:
详情的 demo 页面 test/test.html
- <html>
- <head>
- ...
- </head>
- <body>
- <div id="app">
- <vue-seamless-scroll></vue-seamless-scroll>
- </div>
- <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, // 是否开启鼠标悬停 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)
- }
- }
总结
以上所述是小编给大家介绍的基于 vue.js 无缝滚动效果, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/18/0223/363188.html