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 devUsage
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. |