vue-scrolling-ul

这是一个 Vue2 组件，提供一个自动滚动的 ul 列表。

This is a Vue2 component that provides a list of ul that scrolls automatically.

中文文档

Run Simple 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. |