Skip to content

Commit 03ccf54

Browse files
tangbctangbc
committed
Update demos.
1 parent e6dc48d commit 03ccf54

20 files changed

+7171
-171
lines changed

‎.gitignore

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,2 @@
11
node_modules
2-
npm-debug.log
3-
demo/build.js
4-
demo/build.js.map
2+
npm-debug.log

‎demo/build/finite.js

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

‎demo/build/finite.js.map

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

‎demo/build/infinite.js

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

‎demo/build/infinite.js.map

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

‎demo/common.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.title {
2+
font-size: 25px;
3+
font-weight: 100;
4+
text-align: center;
5+
}
6+
.appWraper {
7+
width: 440px;
8+
position: absolute;
9+
left: 50%;
10+
margin-left: -220px;
11+
overflow-y: auto;
12+
box-shadow: 4px 6px 20px #e6e6e6;
13+
}

‎demo/demo.vue

Lines changed: 0 additions & 49 deletions
This file was deleted.

‎demo/finite/finite.vue

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template>
2+
<div>
3+
<VirtualList
4+
:size="40"
5+
:remain="8"
6+
>
7+
<Item v-for="(udf, index) of items" :index="index" :key="index" />
8+
</VirtualList>
9+
</div>
10+
</template>
11+
12+
<script>
13+
import Item from '../item.vue';
14+
import VirtualList from 'virtual-list';
15+
16+
export default {
17+
name: 'finite-test',
18+
19+
components: { Item, VirtualList },
20+
21+
data () {
22+
return {
23+
items: new Array(100000)
24+
}
25+
}
26+
}
27+
</script>
28+
29+
<style scoped>
30+
.virtual-list {
31+
border-radius: 3px;
32+
border: 1px solid #ddd;
33+
}
34+
</style>
35+

‎demo/finite/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Vue virtual list (finite data)</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" type="text/css" href="../common.css">
8+
</head>
9+
<body>
10+
<h1 class="title">Vue virtual list, with 10,0000 finite data.</h1>
11+
<div class="appWraper">
12+
<div id="app"></div>
13+
</div>
14+
<script src="../build/finite.js"></script>
15+
</body>
16+
</html>

‎demo/finite/index.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Vue from 'vue';
2+
import FiniteDemo from './finite.vue';
3+
4+
new Vue({
5+
el: '#app',
6+
template: '<FiniteDemo />',
7+
components: { FiniteDemo }
8+
});

‎demo/index.html

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎demo/index.js

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎demo/infinite/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Vue virtual list (infinite data)</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" type="text/css" href="../common.css">
8+
</head>
9+
<body>
10+
<h1 class="title">Vue virtual list, infinite data by increasing 20 each time.</h1>
11+
<div class="appWraper">
12+
<div id="app"></div>
13+
</div>
14+
<script src="../build/infinite.js"></script>
15+
</body>
16+
</html>

‎demo/infinite/index.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Vue from 'vue';
2+
import InfiniteDemo from './infinite.vue';
3+
4+
new Vue({
5+
el: '#app',
6+
template: '<InfiniteDemo />',
7+
components: { InfiniteDemo }
8+
});

‎demo/infinite/infinite.vue

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<template>
2+
<div>
3+
<VirtualList
4+
:size="40"
5+
:remain="8"
6+
v-on:toBottom="onBottom"
7+
>
8+
<Item v-for="(udf, index) of items" :index="index" :key="index" />
9+
</VirtualList>
10+
</div>
11+
</template>
12+
13+
<script>
14+
import Item from '../item.vue';
15+
import VirtualList from 'virtual-list';
16+
17+
function getList (length) {
18+
return new Array(length);
19+
}
20+
21+
export default {
22+
name: 'infinite-test',
23+
24+
components: { Item, VirtualList },
25+
26+
data () {
27+
return {
28+
items: getList(20)
29+
}
30+
},
31+
32+
methods: {
33+
onBottom () {
34+
this.items = this.items.concat(getList());
35+
}
36+
}
37+
}
38+
</script>
39+
40+
<style scoped>
41+
.virtual-list {
42+
border-radius: 3px;
43+
border: 1px solid #ddd;
44+
}
45+
</style>
46+

‎demo/item.vue

Lines changed: 7 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,22 @@
11
<template>
2-
<div class="list-item">
3-
<ul class="list-item-box">
4-
<li class="index">{{ item.index }}</li>
5-
<li class="name">{{ item.name }}</li>
6-
<li class="date">{{ item.date }}</li>
7-
</ul>
2+
<div class="item">
3+
<span>Item # {{ index }}</span>
84
</div>
95
</template>
106

117
<script>
128
export default {
139
props: {
14-
item: Object
10+
index: Number
1511
}
1612
}
1713
</script>
1814

1915
<style scoped>
20-
.list-item {
21-
height: 30px;
22-
line-height: 30px;
23-
border-bottom: 1px solid #eee;
24-
}
25-
/*.list-item:nth-child(2n) {
26-
background: #efefef;
27-
}
28-
.list-item:nth-child(2n-1) {
29-
background: #d1e3f5;
30-
}*/
31-
.list-item-box {
32-
list-style: none;
33-
}
34-
.list-item-box li {
35-
display: inline-block;
36-
}
37-
.index {
38-
width: 50px;
39-
font-weight: bold;
40-
text-align: center;
41-
}
42-
.name {
43-
width: 180px;
16+
.item {
17+
height: 50px;
18+
line-height: 50px;
4419
padding-left: 20px;
45-
text-align: left;
46-
}
47-
.date {
48-
width: 120px;
49-
text-align: right;
20+
border-bottom: 1px solid #eee;
5021
}
5122
</style>

‎demo/request_mock.js

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
22
"name": "vue-virtual-scroll-list",
33
"version": "1.0.0",
4-
"description": "A vue component that support big data by using virtual scroll list.",
4+
"description": "A vue component that support big data by using virtual scroll list. Tiny, smooth and without any dependence.",
55
"main": "src/index.js",
66
"scripts": {
7-
"demo": "webpack --watch --config webpack.dev.config.js"
7+
"demo": "webpack --watch --config webpack.config.js"
88
},
99
"keywords": [
1010
"vue",
@@ -20,7 +20,6 @@
2020
"babel-core": "^6.24.0",
2121
"babel-loader": "^6.4.0",
2222
"css-loader": "^0.27.2",
23-
"mockjs": "^1.0.1-beta3",
2423
"vue": "^2.2.2",
2524
"vue-loader": "^11.1.4",
2625
"vue-template-compiler": "^2.2.2",

0 commit comments

Comments
 (0)