Change view_height as const value.

tangbc · tangbc · commit 06fef3dbdda5 · 2017-03-17T18:22:35.000+08:00
diff --git a/demo/demo.vue b/demo/demo.vue
@@ -29,6 +29,7 @@
 
 		methods: {
 			onBottom () {
+				console.log('REQUEST NEXT');
 				this.items = this.items.concat(fetchData());
 			}
 		}
diff --git a/demo/item.vue b/demo/item.vue
@@ -3,7 +3,6 @@
 		<ul class="user-list">
 			<li class="user-item indx">{{ item.indx }}</li>
 			<li class="user-item name">{{ item.name }}</li>
-			<li class="user-item urid">{{ item.urid }}</li>
 			<li class="user-item date">{{ item.date }}</li>
 		</ul>
 	</div>
@@ -22,30 +21,30 @@
 		height: 30px;
 		line-height: 30px;
 	}
-	.user:nth-child(2n) {
+	/*.user:nth-child(2n) {
 		background: #efefef;
 	}
 	.user:nth-child(2n-1) {
 		background: #d1e3f5;
-	}
+	}*/
 	.user-list {
 		list-style: none;
 	}
 	.user-item {
 		display: inline-block;
-		text-align: center;
 	}
 	.indx {
 		width: 50px;
 		font-weight: bold;
-	}
-	.urid {
-		width: 60px;
+		text-align: center;
 	}
 	.name {
-		width: 120px;
+		width: 180px;
+		padding-left: 20px;
+		text-align: left;
 	}
 	.date {
-		width: 130px;
+		width: 120px;
+		text-align: right;
 	}
 </style>
diff --git a/demo/request_mock.js b/demo/request_mock.js
@@ -13,8 +13,7 @@ export function fetchData (count) {
 	while (count--) {
 		list.push({
 			indx: user_count++,
-			urid: Random.natural(1000, 9000),
-			name: Random.cname(),
+			name: Random.name(),
 			date: Random.date()
 		});
 	}
diff --git a/src/index.js b/src/index.js
@@ -3,11 +3,18 @@ import { throttle } from './util';
 
 // some data help to calculate
 let delta = {
-	total: 0,
+	// about scroll
 	direct: '',
 	last_top: 0,
 	page_type: '',
+
+	// about data
+	total: 0,
+	joints: 0,
 	start_index: 0,
+
+	// about style
+	view_height: 0,
 	all_padding: 0,
 	padding_top: 0,
 	bench_padding: 0
@@ -42,12 +49,8 @@ Vue.component('virtual-list', {
 
 	methods: {
 		onScroll: throttle(function () {
-			let cont = this.$refs.container;
-			let listbox = this.$refs.listbox;
-
-			let scrollTop = cont.scrollTop;
-			let viewHeight = cont.offsetHeight;
-			let listHeight = listbox.offsetHeight;
+			let scrollTop = this.$refs.container.scrollTop;
+			let listHeight = this.$refs.listbox.offsetHeight;
 
 			saveDirect(scrollTop);
 
@@ -58,7 +61,7 @@ Vue.component('virtual-list', {
 
 			// scroll to bottom
 			let paddingBottom = delta.all_padding - delta.padding_top;
-			if (listHeight <= scrollTop + viewHeight + paddingBottom) {
+			if (listHeight <= scrollTop + delta.view_height + paddingBottom) {
 				this.showNext();
 			}
 
@@ -137,10 +140,17 @@ Vue.component('virtual-list', {
 		}
 	},
 
+	beforeMount () {
+		delta.view_height = this.remain * this.unit;
+	},
+
 	mounted () {
-		delta.bench_padding = Math.ceil(this.remain / 2) * this.unit;
+		delta.joints = Math.ceil(this.remain / 2);
+		delta.bench_padding = delta.joints * this.unit;
 	},
 
+	beforeUpdate () {},
+
 	updated () {
 		window.requestAnimationFrame(() => {
 			this.$refs.container.scrollTop = delta.padding_top + delta.bench_padding;
@@ -156,7 +166,7 @@ Vue.component('virtual-list', {
 			'class': 'virtual-list',
 			'style': {
 				'overflow-y': 'auto',
-				'height': (this.remain * this.unit) + 'px'
+				'height': delta.view_height + 'px'
 			},
 			'on': {
 				'scroll': this.onScroll
diff --git a/src/util.js b/src/util.js
@@ -2,8 +2,8 @@
 export function throttle (fn, delay, immediate, debounce) {
 	let curr = +new Date();
 	let last_call = 0, last_exec = 0;
-	let	timer = null, diff, context, args;
-	let	exec = function () {
+	let timer = null, diff, context, args;
+	let exec = function () {
 		last_exec = curr;
 		fn.apply(context, args);
 	};

Original file line number	Diff line number	Diff line change
`@@ -29,6 +29,7 @@`
`29`	`29`
`30`	`30`	`methods: {`
`31`	`31`	`onBottom () {`
	`32`	`+ console.log('REQUEST NEXT');`
`32`	`33`	`this.items = this.items.concat(fetchData());`
`33`	`34`	`}`
`34`	`35`	`}`