Vue-scrolling-ul NPM

vue-scrolling-ul

这是一个 Vue2 组件，提供一个自动滚动的 ul 列表。
This is a Vue2 component that provides a list of ul that scrolls automatically.

Run Simple Demo

demo

$ git clone https://github.com/SuperYesifang/vue-scrolling-ul.git
$ cd vue-scrolling-ul
$ npm install
$ npm run dev

Usage

1. Global Use in Vue-Cli Project

main.js

import Vue from "vue";
import VueScrollingUl from "vue-scrolling-ul";

Vue.use(VueScrollingUl);

new Vue({
  el: "#app",
  render: h => h(App)
});

App.vue

<template>
  <div id="app">
    <vue-scrolling-ul>Some LI Tags ...</vue-scrolling-ul>
  </div>
</template>
omit...

2. Direct Use in Vue-Cli Project

App.vue

<template>
  <div id="app">
    <scrolling-ul>Some LI Tags ...</scrolling-ul>
  </div>
</template>

<script>
  import ScrollingUl from "vue-scorlling-ul";

  export default {
    name: "App",
    components: {
      ScrollingUl
    }
    omit...
  };
</script>

Options

Some Vue prop options to config vue-scrolling-ul.

prop	description	type	default
start	Turn on auto scrolling.	Boolean	`true`
smmoth	Turn on smooth scrolling.	Boolean	`true`
infinity	Turn on infinite scrolling.	Boolean	`true`
bar	Configure virtual scroll bar.	`barOptions`	`{show:'auto'}`
speed	Scrolling speed. (unit: `pixel/s`, remark: Must be a positive number)	Number	`30`
delay	Scrolling gap time. (unit: `ms`, remark: Only when `smooth` prop equals `false`,Must be a positive number)	Number	`3000`
nice	Turn on customizes the CSS style and cancels the default style.	Boolean	`false`

barOptions

Type: Object

property	description	type	default
show	Turn on virtual scroll bar.	Boolean \| `"auto"`	`"auto"`
style	Custom CSS style of virtual scroll bar.	Object	omit...

More Custom Style

If you want to customize more styles using CSS.You can use the following className. (Only when nice prop equals true)

className	description
`scrolling-nice-bar`	the visual bar when normal.
`scrolling-nice-bar.barShow`	then visual bar when show.
`scrolling-nice-ul`	the scrolling ul list when normal.
`scrolling-nice-ul.bar`	then scrolling ul list when visual bar is enabled.