Git Product home page Git Product logo

vue-infinite-auto-scroll's Introduction

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

vue-infinite-auto-scroll's People

Contributors

wanls4583 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.