Skip to content

Commit 95e6329

Browse files
tangbctangbc
committed
Merge branch 'alexanderweiss-feature/scrollelement'
2 parents e024655 + fb12d46 commit 95e6329

File tree

12 files changed

+371
-49
lines changed

12 files changed

+371
-49
lines changed

‎README.md

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -191,25 +191,26 @@ According to the demos above, here are lists of approximate statistics:
191191

192192
<img height="256" src="https://tangbc.github.io/github-images/vitual-scroll-list-prop-type.png">
193193

194-
| Prop | Type | Required | Description |
195-
|-----------|---------------------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
196-
| size | Number | ✓ | Each list item height, in variable height, this prop just use to calculate the virtual-list outside container viewport fixed height. |
197-
| remain | Number | ✓ | How many items should be shown in virtual-list viewport, so `size` and `remain` determine the outside container viewport height (`size × remian`). |
198-
| bench | Number | * | Default value is equal to `remain`, unreached items count, not show in virtual-list viewport but exist in real DOM, the larger the bench, the higher the scroll performance will achieved. |
199-
| start | Number | * | Default value is `0`, the initial scroll start index. It must be integer and in the range of list index, if invalid there will be effected as `0` or the last one. |
200-
| offset | Number | * | Default value is `0`, the initial scroll offset. If both `start` and `offset` are assigned at initialization, `start` is preferred. |
201-
| debounce | Number | * | It's disabled by default, milliseconds of using `debounce` function to ensure scroll event doesn't fire so often that it bricks browser performance. |
202-
| rtag | String | * | Default value is `div`, the virtual-list root element tag name, in all cases it's style is set to `display: block;` |
203-
| wtag | String | * | Default value is `div`, the virtual-list item wrapper element tag name, in all cases it's style is set to `display: block;` |
204-
| wclass | String | * | Default is no classname, the virtual-list item wrapper element class, if assign this prop, you better **not** to change it's [CSS box model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model). |
205-
| pagemode | Boolean | * | Let virtual-list scroll with page viewport. |
206-
| totop | Function | * | Called when virtual-list is scrolled to top, no param. |
207-
| tobottom | Function | * | Called when virtual-list is scrolled to bottom, no param. |
208-
| onscroll | Function | * | Called when virtual-list is scrolling, with param: [`(event, data)`](https://github.com/tangbc/vue-virtual-scroll-list/releases/tag/v1.1.7). |
209-
| variable | Function or Boolean | * | Used in variable height, if assign `Function`, this prop is a variable height getter function which is called with param: `(index)` when each item is ready to be calculated; if assign `Boolean`, virtual-list will get each item variable height by it's inline style height automatic. |
210-
| item | Component | * | Using in `item-mode`, list item vue component. |
211-
| itemcount | Number | * | Using in `item-mode`, list data total counts. |
212-
| itemprops | Function | * | Using in `item-mode`, a function call when each item is going to be rendered. |
194+
| Prop | Type | Required | Description |
195+
|---------------|---------------------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
196+
| size | Number | ✓ | Each list item height, in variable height, this prop just use to calculate the virtual-list outside container viewport fixed height. |
197+
| remain | Number | ✓ | How many items should be shown in virtual-list viewport, so `size` and `remain` determine the outside container viewport height (`size × remian`). |
198+
| bench | Number | * | Default value is equal to `remain`, unreached items count, not show in virtual-list viewport but exist in real DOM, the larger the bench, the higher the scroll performance will achieved. |
199+
| start | Number | * | Default value is `0`, the initial scroll start index. It must be integer and in the range of list index, if invalid there will be effected as `0` or the last one. |
200+
| offset | Number | * | Default value is `0`, the initial scroll offset. If both `start` and `offset` are assigned at initialization, `start` is preferred. |
201+
| debounce | Number | * | It's disabled by default, milliseconds of using `debounce` function to ensure scroll event doesn't fire so often that it bricks browser performance. |
202+
| rtag | String | * | Default value is `div`, the virtual-list root element tag name, in all cases it's style is set to `display: block;` |
203+
| wtag | String | * | Default value is `div`, the virtual-list item wrapper element tag name, in all cases it's style is set to `display: block;` |
204+
| wclass | String | * | Default is no classname, the virtual-list item wrapper element class, if assign this prop, you better **not** to change it's [CSS box model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model). |
205+
| pagemode | Boolean | * | Let virtual-list scroll with page viewport. |
206+
| scrollelement | HTMLElement | * | Let virtual-list scroll with a parent element. Note: to scroll with page viewport, use pagemode instead. When pagemode is true, scrollelement is ignored. |
207+
| totop | Function | * | Called when virtual-list is scrolled to top, no param. |
208+
| tobottom | Function | * | Called when virtual-list is scrolled to bottom, no param. |
209+
| onscroll | Function | * | Called when virtual-list is scrolling, with param: [`(event, data)`](https://github.com/tangbc/vue-virtual-scroll-list/releases/tag/v1.1.7). |
210+
| variable | Function or Boolean | * | Used in variable height, if assign `Function`, this prop is a variable height getter function which is called with param: `(index)` when each item is ready to be calculated; if assign `Boolean`, virtual-list will get each item variable height by it's inline style height automatic. |
211+
| item | Component | * | Using in `item-mode`, list item vue component. |
212+
| itemcount | Number | * | Using in `item-mode`, list data total counts. |
213+
| itemprops | Function | * | Using in `item-mode`, a function call when each item is going to be rendered. |
213214

214215

215216
## Public methods

‎demos/item-mode/build.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demos/page-mode/build.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demos/scroll-element/App.vue

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<template>
2+
<div class="app">
3+
<GithubCorner path="/scroll-element" />
4+
<div ref="main" class="container">
5+
<Header title="scroll-element"
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+
:bench="30"
15+
:start="start"
16+
:scrollelement="scrollelement"
17+
18+
:item="item"
19+
:itemcount="itemCount"
20+
:itemprops="getItemProps"
21+
/>
22+
</div>
23+
</div>
24+
</div>
25+
</template>
26+
27+
<script>
28+
import Item from '../common/Item.vue'
29+
import VirtualList from 'vue-virtual-scroll-list'
30+
import { countStorage, getRandomUser } from '../common/util'
31+
32+
const remain = 14
33+
const itemSize = 80
34+
const itemCount = countStorage.get()
35+
36+
let userInfoList = []
37+
for (let i = 0; i < itemCount; i++) {
38+
userInfoList.push(getRandomUser())
39+
}
40+
41+
export default {
42+
name: 'App',
43+
44+
components: {
45+
'virtual-list': VirtualList
46+
},
47+
48+
data () {
49+
return {
50+
remain,
51+
start: 0,
52+
size: itemSize,
53+
item: Item,
54+
itemCount: itemCount,
55+
scrollelement: null
56+
}
57+
},
58+
59+
mounted () {
60+
this.scrollelement = this.$refs.main
61+
},
62+
63+
methods: {
64+
getItemProps (itemIndex) {
65+
return {
66+
key: itemIndex,
67+
props: {
68+
height: itemSize,
69+
index: itemIndex,
70+
info: userInfoList[itemIndex] || {}
71+
}
72+
}
73+
},
74+
75+
onHeaderDataChange (type, value) {
76+
if (type === 'start') {
77+
this.start = value
78+
}
79+
}
80+
}
81+
}
82+
</script>
83+
84+
<style lang="less">
85+
@import '../common/app.less';
86+
87+
.app {
88+
height: 100%;
89+
}
90+
91+
.container {
92+
display: flex;
93+
flex-direction: column;
94+
95+
height: 100%;
96+
97+
overflow: auto;
98+
}
99+
100+
</style>

‎demos/scroll-element/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/scroll-element/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>scroll-element 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 type="text/javascript" src="build.js"></script></body>
11+
</html>

‎demos/scroll-element/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: 1 addition & 1 deletion
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.

0 commit comments

Comments
 (0)