Skip to content

Commit e80c464

Browse files
staticdengstaticdeng
committed
finish refresh and loadmore with example
1 parent 0fd15fa commit e80c464

File tree

22 files changed

+928
-0
lines changed

22 files changed

+928
-0
lines changed

‎example/.browserslistrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
> 1%
2+
last 2 versions
3+
not dead

‎example/.gitignore

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
6+
# local env files
7+
.env.local
8+
.env.*.local
9+
10+
# Log files
11+
npm-debug.log*
12+
yarn-debug.log*
13+
yarn-error.log*
14+
pnpm-debug.log*
15+
16+
# Editor directories and files
17+
.idea
18+
.vscode
19+
*.suo
20+
*.ntvs*
21+
*.njsproj
22+
*.sln
23+
*.sw?

‎example/README.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# vuejs-loadmore-example
2+
3+
## Project setup
4+
```
5+
yarn install
6+
```
7+
8+
### Compiles and hot-reloads for development
9+
```
10+
yarn serve
11+
```
12+
13+
### Compiles and minifies for production
14+
```
15+
yarn build
16+
```
17+
18+
### Customize configuration
19+
See [Configuration Reference](https://cli.vuejs.org/config/).

‎example/babel.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/cli-plugin-babel/preset'
4+
]
5+
}

‎example/package.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "vuejs-loadmore",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build"
8+
},
9+
"dependencies": {
10+
"core-js": "^3.6.5",
11+
"vue": "^2.6.11"
12+
},
13+
"devDependencies": {
14+
"@vue/cli-plugin-babel": "~4.5.0",
15+
"@vue/cli-service": "~4.5.0",
16+
"node-sass": "5.0.0",
17+
"sass-loader": "10.1.1",
18+
"vue-template-compiler": "^2.6.11"
19+
}
20+
}

‎example/public/favicon.ico

4.19 KB
Binary file not shown.

‎example/public/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<title><%= htmlWebpackPlugin.options.title %></title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13+
</noscript>
14+
<div id="app"></div>
15+
<!-- built files will be auto injected -->
16+
</body>
17+
</html>

‎example/src/App.vue

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<template>
2+
<div class="wrap">
3+
<vue-loadmore
4+
:on-refresh="onRefresh"
5+
:on-loadmore="onLoad"
6+
:finished="finished"
7+
:error.sync="error"
8+
>
9+
<ul class="list-ul">
10+
<li class="list-li" v-for="(item, index) of list" :key="item">测试数据{{ index + 1 }}</li>
11+
</ul>
12+
</vue-loadmore>
13+
</div>
14+
</template>
15+
16+
<script>
17+
import VueLoadmore from '../../packages/index';
18+
19+
export default {
20+
name: 'app',
21+
components: {
22+
VueLoadmore,
23+
},
24+
data() {
25+
return {
26+
list: [],
27+
loading: false,
28+
finished: false,
29+
error: false,
30+
};
31+
},
32+
methods: {
33+
onRefresh(done) {
34+
done();
35+
},
36+
37+
onLoad(done) {
38+
for (let i = 0; i < 10; i++) {
39+
this.list.push(this.list.length + 1);
40+
}
41+
42+
if (this.list.length == 30) {
43+
this.error = true;
44+
}
45+
// 数据全部加载完成
46+
if (this.list.length >= 100) {
47+
this.finished = true;
48+
}
49+
50+
done();
51+
}
52+
},
53+
destroyed() {
54+
clearTimeout(this.timer);
55+
}
56+
};
57+
</script>
58+
59+
<style lang="scss">
60+
@import './assets/reset';
61+
.wrap{
62+
padding: 20px;
63+
// margin-top: 100px;
64+
// overflow: auto;
65+
// height: 500px;
66+
}
67+
.list-ul {
68+
.list-li {
69+
height: 50px;
70+
margin-bottom: 10px;
71+
font-size: 13px;
72+
color: #323233;
73+
line-height: 50px;
74+
text-align: center;
75+
background-color: #fff;
76+
border: 1px solid #ebedf0;
77+
}
78+
}
79+
</style>

‎example/src/assets/reset.scss

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
html,
2+
body,
3+
div,
4+
span,
5+
applet,
6+
object,
7+
iframe,
8+
h1,
9+
h2,
10+
h3,
11+
h4,
12+
h5,
13+
h6,
14+
p,
15+
blockquote,
16+
pre,
17+
a,
18+
abbr,
19+
acronym,
20+
address,
21+
big,
22+
cite,
23+
code,
24+
del,
25+
dfn,
26+
em,
27+
img,
28+
ins,
29+
kbd,
30+
q,
31+
s,
32+
samp,
33+
small,
34+
strike,
35+
strong,
36+
sub,
37+
sup,
38+
tt,
39+
var,
40+
b,
41+
u,
42+
i,
43+
center,
44+
dl,
45+
dt,
46+
dd,
47+
ol,
48+
ul,
49+
li,
50+
fieldset,
51+
form,
52+
label,
53+
legend,
54+
table,
55+
caption,
56+
tbody,
57+
tfoot,
58+
thead,
59+
tr,
60+
th,
61+
td,
62+
article,
63+
aside,
64+
canvas,
65+
details,
66+
embed,
67+
figure,
68+
figcaption,
69+
footer,
70+
header,
71+
hgroup,
72+
menu,
73+
nav,
74+
output,
75+
ruby,
76+
section,
77+
summary,
78+
time,
79+
mark,
80+
audio,
81+
video {
82+
margin: 0;
83+
padding: 0;
84+
font: inherit;
85+
font-size: 100%;
86+
vertical-align: baseline;
87+
border: 0;
88+
}
89+
90+
html {
91+
line-height: 1;
92+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
93+
}
94+
95+
ol,
96+
ul {
97+
list-style: none;
98+
}
99+
100+
table {
101+
border-collapse: collapse;
102+
border-spacing: 0;
103+
}
104+
105+
caption,
106+
th,
107+
td {
108+
font-weight: normal;
109+
vertical-align: middle;
110+
}
111+
112+
* {
113+
box-sizing: content-box;
114+
}
115+
116+
body {
117+
color: #323233;
118+
background-color: #f7f8fa;
119+
}
120+
121+
122+
button,
123+
input[type='number'],
124+
input[type='text'],
125+
input[type='password'],
126+
input[type='email'],
127+
input[type='search'],
128+
select,
129+
textarea {
130+
margin: 0;
131+
font-family: inherit;
132+
-webkit-appearance: none;
133+
}

‎example/src/main.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 App from './App.vue'
3+
4+
Vue.config.productionTip = false
5+
6+
new Vue({
7+
render: h => h(App),
8+
}).$mount('#app')

‎packages/icon/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import loading from './loading.vue';
2+
import './loading.scss';
3+
4+
export default loading;

‎packages/icon/loading.scss

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
@import '../style/var';
2+
.vuejs-loading {
3+
position: relative;
4+
color: $loading-spinner-color;
5+
font-size: 0;
6+
vertical-align: middle;
7+
8+
&-spinner {
9+
position: relative;
10+
display: inline-block;
11+
width: $loading-spinner-size;
12+
// compatible for 1.x, users may set width or height in root element
13+
max-width: 100%;
14+
height: $loading-spinner-size;
15+
max-height: 100%;
16+
vertical-align: middle;
17+
18+
&-circular {
19+
animation-duration: 2s;
20+
}
21+
}
22+
23+
&-circular {
24+
display: block;
25+
width: 100%;
26+
height: 100%;
27+
28+
circle {
29+
animation: vuejs-circular 1.5s ease-in-out infinite;
30+
stroke: currentColor;
31+
stroke-width: 3;
32+
stroke-linecap: round;
33+
}
34+
}
35+
36+
&-text {
37+
display: inline-block;
38+
margin-left: $padding-xs;
39+
color: $loading-text-color;
40+
font-size: $loading-text-font-size;
41+
vertical-align: middle;
42+
}
43+
}
44+
@keyframes vuejs-circular {
45+
0% {
46+
stroke-dasharray: 1, 200;
47+
stroke-dashoffset: 0;
48+
}
49+
50+
50% {
51+
stroke-dasharray: 90, 150;
52+
stroke-dashoffset: -40;
53+
}
54+
55+
100% {
56+
stroke-dasharray: 90, 150;
57+
stroke-dashoffset: -120;
58+
}
59+
}

0 commit comments

Comments
 (0)