Support designate klass.

Author: tangbc

README.md

@@ -94,7 +94,8 @@ new Vue({
 :--- | :--- | :--- | :--- |
 | size | Number | ✓ | Each list item height, currently only supports fixed height. |
 | remain | Number | ✓ | How many items except show in virtual-list viewport, so `size` and `remian` will determine the virtual-list outside container height (size × remian). |
-| onScroll | Function | * | Call on virtual-list scroll event hanlding, param: `(scrollTop, e)`  |
+| klass | String | * | Add a custom classname to virtual-list component default is `virtual-scroll-list`. |
+| onScroll | Function | * | Call on virtual-list scroll event hanlding, param: `(e, scrollTop)`  |
 | toTop | Event | * | An event emit by virtual-list component when the list is scrolled on top. |
 | toBottom | Event | * | An event emit by virtual-list component when the list is scrolled on bottom. |
 

demo/build/finite.js

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<VirtualList :size="40" :remain="8">
+		<VirtualList :size="50" :remain="6" :klass="'list'">
 			<Item v-for="(udf, index) of items" :index="index" :key="index" />
 		</VirtualList>
 	</div>
@@ -24,7 +24,7 @@
 </script>
 
 <style scoped>
-	.virtual-list {
+	.list {
 		border-radius: 3px;
 		border: 1px solid #ddd;
 		-webkit-overflow-scrolling: touch;

demo/build/finite.js.map

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<VirtualList :size="40" :remain="8" v-on:toBottom="onBottom">
+		<VirtualList :size="50" :remain="6" v-on:toBottom="onBottom">
 			<Item v-for="(udf, index) of items" :index="index" :key="index" />
 		</VirtualList>
 	</div>
@@ -34,7 +34,7 @@
 </script>
 
 <style scoped>
-	.virtual-list {
+	.virtual-scroll-list {
 		border-radius: 3px;
 		border: 1px solid #ddd;
 		-webkit-overflow-scrolling: touch;

demo/build/infinite.js

@@ -11,6 +11,10 @@ const VirtualList = Vue.component('vue-virtual-scroll-list', {
 			type: Number,
 			required: true
 		},
+		klass: {
+			type: String,
+			default: 'virtual-scroll-list'
+		},
 		onScroll: Function
 	},
 
@@ -79,7 +83,7 @@ const VirtualList = Vue.component('vue-virtual-scroll-list', {
 	beforeMount () {
 		let remains = this.remain;
 		let delta = this.$options.delta;
-		let benchs = Math.ceil(remains / 2);
+		let benchs = Math.round(remains / 2);
 
 		delta.end = remains + benchs;
 		delta.keeps = remains + benchs;
@@ -92,7 +96,7 @@ const VirtualList = Vue.component('vue-virtual-scroll-list', {
 
 		return createElement('div', {
 			'ref': 'container',
-			'class': 'virtual-list',
+			'class': this.klass,
 			'style': {
 				'overflow-y': 'auto',
 				'height': viewHeight + 'px'
@@ -102,17 +106,11 @@ const VirtualList = Vue.component('vue-virtual-scroll-list', {
 			}
 		}, [
 			createElement('div', {
-				'ref': 'listbox',
-				'class': 'virtual-list-box',
-			}, [
-				createElement('div', {
-					'class': 'virtual-list-box-padding',
-					'style': {
-						'padding-top': paddingTop + 'px',
-						'padding-bottom': (allPadding - paddingTop) + 'px'
-					}
-				}, showList)
-			])
+				'style': {
+					'padding-top': paddingTop + 'px',
+					'padding-bottom': allPadding - paddingTop + 'px'
+				}
+			}, showList)
 		]);
 	}
 });