/vue-infinite-auto-scroll

基于vue.js的无缝自动滚动的插件，可添加无限数据而不卡顿

Primary LanguageJavaScript

vue-infinite-auto-scroll

基于vue.js的无缝自动滚动的插件，可添加无限数据而不卡顿

内容

浏览器兼容性

IE
IE		 Firefox
Firefox		 Chrome
Chrome		 Safari
Safari		 iOS Safari
iOS		 Chrome for Android
Android
IE9+ ✓ ✓ ✓ ✓ ✓

功能特性

  • 基于requestAnimationFrame实现
  • 配置多满足多样需求
  • 目前支持上下无缝滚动
  • 持续维护迭代
  • 可暂停或重新开始

安装

NPM

npm install vue-infinite-auto-scroll --save

使用

// **main.js**
// 1.全局 install
import Vue from 'vue'
import scroll from 'vue-infinite-auto-scroll'
Vue.use(scroll)

// 或者你可以自己设置全局注册的组件名 默认注册的组件名是 vue-infinite-auto-scroll
Vue.use(scroll,{componentName: 'vue-infinite-auto-scroll'})

// 2.单个.vue文件局部注册
<script>
  import vueInfiniteAutoScroll from 'vue-infinite-auto-scroll'
   export default {
      components: {
        vueInfiniteAutoScroll
      }
   }
</script>

案例

请查看example

online demo

配置项

key description default val
speed 数值越大速度滚动越快 1 Number
force 是否强制滚动，如果为ture，则即使列表小于容器高度，也将循环滚动 false Number
once 是否只滚动一次 false Boolean
newFirst 动态新增的数据是否优先显示，为true时将打乱显示的顺序 false Boolean

个别特殊配置项说明

1.最外层容器需要手动设置width height overflow:hidden

历史版本

See the GitHub 历史版本.

贡献

欢迎给出一些意见和优化，期待你的 Pull Request