Skip to content

Commit a59f43e

Browse files
tangbctangbc
committed
Merge branch 'Stormtv-master'
2 parents eb7450e + e63a071 commit a59f43e

File tree

13 files changed

+781
-87
lines changed

13 files changed

+781
-87
lines changed

‎demos/item-mode/build.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demos/page-mode/App.vue

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<template>
2+
<div class="app">
3+
<GithubCorner path="/page-mode" />
4+
<div class="container">
5+
<Header title="page-mode"
6+
:desciption="'Build ' + itemCount.toLocaleString() + ' items.'"
7+
:start-index="start"
8+
:on-data-change="onHeaderDataChange"
9+
/>
10+
<div class="main">
11+
<virtual-list class="list"
12+
:size="size"
13+
:remain="remain"
14+
:start="start"
15+
:pagemode="true"
16+
:item="item"
17+
:itemcount="itemCount"
18+
:itemprops="getItemProps"
19+
/>
20+
</div>
21+
</div>
22+
</div>
23+
</template>
24+
25+
<script>
26+
import Item from '../common/Item.vue'
27+
import VirtualList from 'vue-virtual-scroll-list'
28+
import { countStorage, getRandomUser } from '../common/util'
29+
30+
const remain = 17
31+
const itemSize = 80
32+
const itemCount = countStorage.get()
33+
34+
let userInfoList = []
35+
for (let i = 0; i < itemCount; i++) {
36+
userInfoList.push(getRandomUser())
37+
}
38+
39+
export default {
40+
name: 'App',
41+
42+
components: {
43+
'virtual-list': VirtualList
44+
},
45+
46+
data () {
47+
return {
48+
remain,
49+
start: 0,
50+
size: itemSize,
51+
item: Item,
52+
itemCount: itemCount
53+
}
54+
},
55+
56+
methods: {
57+
getItemProps (itemIndex) {
58+
return {
59+
key: itemIndex,
60+
props: {
61+
height: itemSize,
62+
index: itemIndex,
63+
info: userInfoList[itemIndex] || {}
64+
}
65+
}
66+
},
67+
68+
onHeaderDataChange (type, value) {
69+
if (type === 'start') {
70+
this.start = value
71+
}
72+
}
73+
}
74+
}
75+
</script>
76+
77+
<style lang="less">
78+
@import '../common/app.less';
79+
html,body {
80+
overflow: inherit;
81+
}
82+
.main {
83+
margin-bottom: 500px
84+
}
85+
</style>

‎demos/page-mode/build.js

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demos/page-mode/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>item-mode demo of vue-virtual-scroll-list</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script src="build.js"></script>
11+
</body>
12+
</html>

‎demos/page-mode/main.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import App from './App.vue'
2+
import createApp from '../common/createApp'
3+
4+
createApp(App)

‎demos/variable-height/build.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demos/vfor-mode/build.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.js

Lines changed: 42 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,10 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterat
6767
type: String,
6868
default: ''
6969
},
70+
pagemode: {
71+
type: Boolean,
72+
default: false
73+
},
7074
start: {
7175
type: Number,
7276
default: 0
@@ -174,14 +178,23 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterat
174178
this.delta = delta;
175179
},
176180
mounted: function mounted() {
181+
if (this.pagemode) {
182+
window.addEventListener('scroll', this.debounce ? _debounce(this.onScroll.bind(this), this.debounce) : this.onScroll, false);
183+
}
184+
177185
if (this.start) {
178186
var start = this.getZone(this.start).start;
179187
this.setScrollTop(this.variable ? this.getVarOffset(start) : start * this.size);
180188
} else if (this.offset) {
181189
this.setScrollTop(this.offset);
182190
}
183191
},
184-
// check if delta should update when prorps change.
192+
beforeDestroy: function beforeDestroy() {
193+
if (this.pagemode) {
194+
window.removeEventListener('scroll', this.debounce ? _debounce(this.onScroll.bind(this), this.debounce) : this.onScroll, false);
195+
}
196+
},
197+
// check if delta should update when props change.
185198
beforeUpdate: function beforeUpdate() {
186199
var delta = this.delta;
187200
delta.keeps = this.remain + (this.bench || this.remain);
@@ -205,7 +218,7 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterat
205218
onScroll: function onScroll(event) {
206219
var delta = this.delta;
207220
var vsl = this.$refs.vsl;
208-
var offset = (vsl.$el || vsl).scrollTop || 0;
221+
var offset = this.pagemode ? window.pageYOffset : (vsl.$el || vsl).scrollTop || 0;
209222
delta.direction = offset > delta.scrollTop ? 'D' : 'U';
210223
delta.scrollTop = offset;
211224

@@ -416,10 +429,14 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterat
416429
},
417430
// set manual scroll top.
418431
setScrollTop: function setScrollTop(scrollTop) {
419-
var vsl = this.$refs.vsl;
432+
if (this.pagemode) {
433+
window.scrollTo(0, scrollTop);
434+
} else {
435+
var vsl = this.$refs.vsl;
420436

421-
if (vsl) {
422-
(vsl.$el || vsl).scrollTop = scrollTop;
437+
if (vsl) {
438+
(vsl.$el || vsl).scrollTop = scrollTop;
439+
}
423440
}
424441
},
425442
// filter the shown items base on `start` and `end`.
@@ -458,6 +475,14 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterat
458475
paddingBottom = 0;
459476
}
460477

478+
if (this.pagemode && this.$el && this.$el.parentElement) {
479+
var bodyRect = document.body.getBoundingClientRect();
480+
var elemRect = this.$el.parentElement.getBoundingClientRect();
481+
var offset = elemRect.top - bodyRect.top;
482+
paddingTop -= offset;
483+
if (paddingTop < 0) paddingTop = 0;
484+
}
485+
461486
delta.paddingTop = paddingTop;
462487
delta.paddingBottom = paddingBottom;
463488
delta.offsetAll = allHeight - this.size * this.remain;
@@ -484,6 +509,18 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterat
484509
var _this$delta = this.delta,
485510
paddingTop = _this$delta.paddingTop,
486511
paddingBottom = _this$delta.paddingBottom;
512+
513+
if (this.pagemode) {
514+
return h(this.wtag, {
515+
'style': {
516+
'display': 'block',
517+
'padding-top': paddingTop + 'px',
518+
'padding-bottom': paddingBottom + 'px'
519+
},
520+
'class': this.wclass
521+
}, list);
522+
}
523+
487524
return h(this.rtag, {
488525
'ref': 'vsl',
489526
'style': {

0 commit comments

Comments
 (0)