vue-scrolling-ul

vue-scrolling-ul

This is a Vue 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 ScrollingUl from "vue-scrolling-ul";

Vue.use(ScrollingUl);

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

• App.vue

<template>
	<div id="app">
		<scrolling-ul>Some LI Tags ...</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 ScrollingUl.

prop	description	type	default
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/ms, remark: Must be a positive number)	Number	30
delay	Scrolling gap time (unit: ms, remark: Only when smooth 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	/

More Custom Style

If you want to customize more styles using CSS.You can use the following className.

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