Skip to content

Commit ef45dd0

Browse files
tangbctangbc
committed
Update demos.
1 parent 8424a11 commit ef45dd0

File tree

12 files changed

+253
-47
lines changed

12 files changed

+253
-47
lines changed

‎demos/common/Header.vue

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
<template>
2+
<header>
3+
<h1>{{ title }}</h1>
4+
<section>
5+
<span>{{ desciption }}</span>
6+
<span class="memory" v-if="supportMemory">Memory used: {{memoryUsed}} MB.</span>
7+
<div class="icon" v-bind:class="showSetting ? 'active' : ''" v-on:click="clickIcon">
8+
<svg width="25" height="25" t="1553394278598" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8690" xmlns:xlink="http://www.w3.org/1999/xlink">
9+
<path d="M809.21 474.749H374.022c-19.865 0-35.966 16.101-35.966 35.966 0 19.859 16.101 35.966 35.966 35.966H809.21c19.865 0 35.966-16.107 35.966-35.966 0-19.864-16.101-35.966-35.966-35.966m0 215.796H374.022c-19.865 0-35.966 16.101-35.966 35.966 0 19.859 16.101 35.966 35.966 35.966H809.21c19.865 0 35.966-16.107 35.966-35.966 0-19.865-16.101-35.966-35.966-35.966M220.52 258.954c-19.865 0-35.966 16.101-35.966 35.966 0 19.865 16.101 35.966 35.966 35.966s35.966-16.101 35.966-35.966c0-19.865-16.102-35.966-35.966-35.966m153.502 71.932H809.21c19.865 0 35.966-16.101 35.966-35.966 0-19.865-16.101-35.966-35.966-35.966H374.022c-19.865 0-35.966 16.101-35.966 35.966 0 19.864 16.102 35.966 35.966 35.966M220.52 474.749c-19.865 0-35.966 16.101-35.966 35.966 0 19.859 16.101 35.966 35.966 35.966s35.966-16.107 35.966-35.966c0-19.864-16.102-35.966-35.966-35.966m0 215.796c-19.865 0-35.966 16.101-35.966 35.966 0 19.859 16.101 35.966 35.966 35.966s35.966-16.107 35.966-35.966c0-19.865-16.102-35.966-35.966-35.966" p-id="8691" fill="#2c2c2c"></path>
10+
</svg>
11+
</div>
12+
<div class="setting" v-if="isRenderSetting">
13+
<label v-if="showStart">
14+
<span class="name">START INDEX:</span>
15+
<input type="text"
16+
v-model="selfStartIndex"
17+
v-on:focus="$event.target.select()"
18+
v-on:input="inputDataChange('start', $event.target.value)"
19+
>
20+
</label>
21+
<i v-bind:style="{visibility: hasTypingInput ? 'visible' : 'hidden'}">updated after debounce 1s.</i>
22+
</div>
23+
</section>
24+
</header>
25+
</template>
26+
27+
<script>
28+
import { debounce } from './util'
29+
30+
export default {
31+
name: 'app-header',
32+
33+
data () {
34+
return {
35+
memoryUsed: 0,
36+
supportMemory: false,
37+
showSetting: false,
38+
selfStartIndex: 0,
39+
hasTypingInput: false,
40+
}
41+
},
42+
43+
computed: {
44+
showStart () {
45+
return this.startIndex !== undefined
46+
},
47+
48+
isRenderSetting () {
49+
return this.showSetting && (this.showStart)
50+
}
51+
},
52+
53+
props: {
54+
title: String,
55+
desciption: String,
56+
startIndex: Number,
57+
onDataChange: Function
58+
},
59+
60+
methods: {
61+
clickIcon () {
62+
this.showSetting = !this.showSetting
63+
},
64+
65+
inputDataChange: debounce(function (type, value) {
66+
const val = Number(value)
67+
if (this.onDataChange && value !== '' && !isNaN(val) && val >= 0) {
68+
this.hasTypingInput = true
69+
this.onDataChange(type, val)
70+
}
71+
}, 1000, false)
72+
},
73+
74+
mounted () {
75+
this.selfStartIndex = this.startIndex
76+
77+
if (window.performance && window.performance.memory && window.performance.memory.usedJSHeapSize) {
78+
this.supportMemory = true
79+
this.memoryUsed = parseInt(window.performance.memory.usedJSHeapSize / (1024 * 1024))
80+
}
81+
}
82+
}
83+
</script>
84+
85+
<style lang="less">
86+
header {
87+
font-family: monospace;
88+
h1 {
89+
padding: 20px 0;
90+
@media (max-width: 640px) {
91+
padding: 10px 0;
92+
font-size: 24px;
93+
}
94+
}
95+
section {
96+
font-size: 14px;
97+
background: #f7f7f7;
98+
padding: 10px;
99+
margin-bottom: 20px;
100+
border-radius: 5px;
101+
position: relative;
102+
.memory {
103+
color: #ee82ee;
104+
position: absolute;
105+
right: 50px;
106+
@media (max-width: 640px) {
107+
display: block;
108+
position: relative;
109+
right: 0;
110+
padding-top: 5px;
111+
}
112+
}
113+
.icon {
114+
width: 25px;
115+
height: 25px;
116+
line-height: 25px;
117+
text-align: center;
118+
position: absolute;
119+
right: 10px;
120+
top: 5px;
121+
cursor: pointer;
122+
border-radius: 3px;
123+
&.active {
124+
background-color: #c0c0c0;
125+
}
126+
}
127+
.setting {
128+
position: relative;
129+
padding: 30px 0 20px 20px;
130+
label {
131+
display: block;
132+
margin-bottom: 20px;
133+
&:last-child {
134+
margin: 0;
135+
}
136+
.name {
137+
font-family: 'Courier New', Courier, monospace;
138+
font-weight: bold;
139+
display: inline-block;
140+
min-width: 120px;
141+
text-align: left;
142+
font-size: 16px;
143+
}
144+
}
145+
i {
146+
position: absolute;
147+
right: 0;
148+
color: lightsteelblue;
149+
font-size: 12px;
150+
}
151+
input {
152+
-webkit-appearance: none;
153+
appearance: none;
154+
padding: 5px;
155+
outline: none;
156+
color: #464a4c;
157+
background-color: #fff;
158+
border-radius: 3px;
159+
border: 1px solid rgba(0, 0, 0, .15);
160+
font-size: 14px;
161+
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
162+
&:focus {
163+
outline: 0;
164+
border-color: #5cb3fd;
165+
}
166+
}
167+
}
168+
}
169+
}
170+
</style>

‎demos/common/Item.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,9 @@ export default {
7070
display: flex;
7171
-webkit-user-select: none;
7272
user-select: none;
73-
&:hover {
74-
background-color: #f0f8ff;
75-
}
73+
// &:hover {
74+
// background-color: #f0f8ff;
75+
// }
7676
.index {
7777
flex: 1;
7878
text-align: center;

‎demos/common/app.less

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,6 @@ html,body {
88
font-size: 16px;
99
font-family: serif;
1010
}
11-
header {
12-
font-family: monospace;
13-
h1 {
14-
padding: 20px 0;
15-
@media (max-width: 640px) {
16-
padding: 10px 0;
17-
font-size: 24px;
18-
}
19-
}
20-
p {
21-
font-size: 14px;
22-
background: #f7f7f7;
23-
padding: 10px;
24-
margin-bottom: 20px;
25-
border-radius: 5px;
26-
}
27-
}
2811
.app {
2912
height: 100%;
3013
position: relative;

‎demos/common/createApp.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import Vue from 'vue'
2-
import GithubCorner from '../common/Corner.vue'
2+
import Header from './Header.vue'
3+
import GithubCorner from './Corner.vue'
34

45
export default function (App) {
56
Vue.config.devtools = false
67
Vue.config.productionTip = false
78

9+
Vue.component('Header', Header)
810
Vue.component('GithubCorner', GithubCorner)
911

1012
new Vue({

‎demos/common/util.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -199,3 +199,23 @@ const ua = navigator.userAgent
199199
const Android = !!ua.match(/Android/i)
200200
export const iOS = !!ua.match(/iPhone|iPad|iPod/i)
201201
export const isMobile = Android || iOS
202+
203+
export const debounce = (func, wait, immediate) => {
204+
let timeout
205+
return function () {
206+
const context = this
207+
const args = arguments
208+
const later = function () {
209+
timeout = null
210+
if (!immediate) {
211+
func.apply(context, args)
212+
}
213+
}
214+
const callNow = immediate && !timeout
215+
clearTimeout(timeout)
216+
timeout = setTimeout(later, wait)
217+
if (callNow) {
218+
func.apply(context, args)
219+
}
220+
}
221+
}

‎demos/item-mode/App.vue

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,17 @@
22
<div class="app">
33
<GithubCorner path="/item-mode" />
44
<div class="container">
5-
<header>
6-
<h1>item-mode</h1>
7-
<p>Use vNode to build list.</p>
8-
</header>
5+
<Header
6+
title="item-mode"
7+
:desciption="'Build ' + itemCount.toLocaleString() + ' items.'"
8+
:startIndex="start"
9+
:onDataChange="onHeaderDataChange"
10+
></Header>
911
<div class="main">
1012
<virtual-list class="list"
1113
:size="size"
1214
:remain="remain"
15+
:start="start"
1316

1417
:item="item"
1518
:itemcount="itemCount"
@@ -45,6 +48,7 @@ export default {
4548
data () {
4649
return {
4750
remain,
51+
start: 0,
4852
size: itemSize,
4953
item: Item,
5054
itemCount: itemCount
@@ -61,7 +65,13 @@ export default {
6165
info: userInfoList[itemIndex] || {}
6266
}
6367
}
64-
}
68+
},
69+
70+
onHeaderDataChange (type, value) {
71+
if (type === 'start') {
72+
this.start = value
73+
}
74+
},
6575
}
6676
}
6777
</script>

‎demos/item-mode/build.js

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

‎demos/variable-height/App.vue

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,24 @@
22
<div class="app">
33
<GithubCorner path="/variable-height" />
44
<div class="container">
5-
<header>
6-
<h1>variable-mode</h1>
7-
<p>Use variable to build list.</p>
8-
</header>
5+
<Header
6+
title="variable-height"
7+
:desciption="'Build ' + itemCount.toLocaleString() + ' items.'"
8+
:startIndex="start"
9+
:onDataChange="onHeaderDataChange"
10+
></Header>
911
<div class="main">
1012
<virtual-list class="list"
1113
:size="size"
1214
:remain="remain"
15+
:start="start"
1316

1417
:variable="getVariableHeight"
1518

1619
:item="item"
1720
:itemcount="itemCount"
1821
:itemprops="getItemProps"
19-
>
20-
</virtual-list>
22+
></virtual-list>
2123
</div>
2224
</div>
2325
</div>
@@ -50,6 +52,7 @@ export default {
5052
data () {
5153
return {
5254
remain,
55+
start: 0,
5356
size: itemSize,
5457
item: Item,
5558
itemCount: itemCount
@@ -71,6 +74,12 @@ export default {
7174
7275
getVariableHeight (itemIndex) {
7376
return userInfoList[itemIndex].vHeight
77+
},
78+
79+
onHeaderDataChange (type, value) {
80+
if (type === 'start') {
81+
this.start = value
82+
}
7483
}
7584
}
7685
}

‎demos/variable-height/build.js

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

‎demos/variable-height/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en-US">
33
<head>
44
<meta charset="utf-8">
5-
<title>variable-mode demo of vue-virtual-scroll-list</title>
5+
<title>variable height demo of vue-virtual-scroll-list</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
</head>
88
<body>

0 commit comments

Comments
 (0)