vue-scrolling-ul

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.