Skip to content

Commit bbe04d3

Browse files
kscriptkscript
committed
添加InfiniteScroll文档
1 parent 18113c4 commit bbe04d3

File tree

6 files changed

+228
-1
lines changed

6 files changed

+228
-1
lines changed

‎examples/views/Components.ts

+4
Original file line numberDiff line numberDiff line change
@@ -99,4 +99,8 @@ export const list = [
9999
name: 'ElTag',
100100
title: 'Tag 标签'
101101
},
102+
{
103+
name: 'InfiniteScroll',
104+
title: 'InfiniteScroll 无限滚动'
105+
},
102106
]

‎examples/views/InfiniteScroll/Base.vue

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<template>
2+
<el-card shadow="hover">
3+
<template #header>
4+
<ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
5+
<li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>
6+
</ul>
7+
</template>
8+
<el-code collapse :trim="-1" :first="1">
9+
{{`<ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
10+
<li v-for="i in count" :key="i" class="infinite-list-item">\{\{ i \}\}</li>
11+
</ul>
12+
<script lang="ts">
13+
import { defineComponent, ref } from 'vue'
14+
export default defineComponent({
15+
setup() {
16+
const count = ref(10)
17+
const load = () => {
18+
count.value += 10
19+
}
20+
return {
21+
count
22+
}
23+
}
24+
})
25+
</script>`}}
26+
<template #desc><slot></slot></template>
27+
</el-code>
28+
</el-card>
29+
</template>
30+
31+
<script lang="ts">
32+
import { defineComponent, ref } from 'vue'
33+
export default defineComponent({
34+
name: 'Base',
35+
setup() {
36+
const count = ref(10)
37+
const load = () => {
38+
count.value += 10
39+
}
40+
return {
41+
count,
42+
load
43+
}
44+
}
45+
})
46+
</script>

‎examples/views/InfiniteScroll/Disabled.vue

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<template>
2+
<el-card shadow="hover">
3+
<template #header>
4+
<div class="infinite-list-wrapper" style="overflow:auto">
5+
<ul
6+
class="list"
7+
v-infinite-scroll="load"
8+
infinite-scroll-disabled="disabled">
9+
<li v-for="i in count" :key="i" class="list-item">{{ i }}</li>
10+
</ul>
11+
<p v-if="loading">加载中...</p>
12+
<p v-if="noMore">没有更多了</p>
13+
</div>
14+
</template>
15+
<el-code collapse :trim="-1" :first="1">
16+
{{`<div class="infinite-list-wrapper" style="overflow:auto">
17+
<ul
18+
class="list"
19+
v-infinite-scroll="load"
20+
infinite-scroll-disabled="disabled">
21+
<li v-for="i in count" :key="i" class="list-item">\{\{ i \}\}</li>
22+
</ul>
23+
<p v-if="loading">加载中...</p>
24+
<p v-if="noMore">没有更多了</p>
25+
</div>
26+
<script lang="ts">
27+
import { computed, defineComponent, ref } from 'vue'
28+
export default defineComponent({
29+
setup() {
30+
const count = ref(10)
31+
const loading = ref(false)
32+
const noMore = computed(() => {
33+
return count.value >= 20
34+
})
35+
const disabled = computed(() => {
36+
return loading.value || noMore.value
37+
})
38+
const load = () => {
39+
loading.value = true
40+
setTimeout(() => {
41+
count.value += 2
42+
loading.value = false
43+
}, 2000)
44+
}
45+
return {
46+
count,
47+
loading,
48+
noMore,
49+
disabled,
50+
load
51+
}
52+
}
53+
})
54+
</script>`}}
55+
<template #desc><slot></slot></template>
56+
</el-code>
57+
</el-card>
58+
</template>
59+
60+
<script lang="ts">
61+
import { computed, defineComponent, ref } from 'vue'
62+
export default defineComponent({
63+
name: 'Disabled',
64+
setup() {
65+
const count = ref(10)
66+
const loading = ref(false)
67+
const noMore = computed(() => {
68+
return count.value >= 20
69+
})
70+
const disabled = computed(() => {
71+
return loading.value || noMore.value
72+
})
73+
const load = () => {
74+
loading.value = true
75+
setTimeout(() => {
76+
count.value += 2
77+
loading.value = false
78+
}, 2000)
79+
}
80+
return {
81+
count,
82+
loading,
83+
noMore,
84+
disabled,
85+
load
86+
}
87+
}
88+
})
89+
</script>

‎examples/views/InfiniteScroll/index.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
## InfiniteScroll 无限滚动
2+
滚动至底部时，加载更多数据。
3+
> distance小于等于0时, 可能存在无法触发加载函数的情况, 最好设置大于0的值
4+
5+
### 基础用法
6+
在要实现滚动加载的列表上添加`v-infinite-scroll`，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。
7+
<infinite-scroll-base></infinite-scroll-base>
8+
9+
### 禁用加载
10+
<i></i>
11+
<infinite-scroll-disabled></infinite-scroll-disabled>
12+
13+
### Attributes
14+
|参数|说明|类型|可选值|默认值|
15+
|--|--|--|--|--|
16+
|infinite-scroll-disabled|是否禁用|boolean|-|false|
17+
|infinite-scroll-delay|节流时延，单位为ms|number|-|200|
18+
|infinite-scroll-distance|触发加载的距离阈值，单位为px|number|-|0|
19+
|infinite-scroll-immediate|是否立即执行加载方法，以防初始状态下内容无法撑满容器。|boolean|-|true|

‎examples/views/InfiniteScroll/index.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { ComponentOptions } from 'vue'
2+
import Base from './Base.vue'
3+
import Disabled from './Disabled.vue'
4+
import index from './index.md'
5+
import { DemoEntry, Markdown } from '../type'
6+
export const demoComponents: ComponentOptions[] = [
7+
Base,
8+
Disabled
9+
]
10+
export const demoMarkdowns: Markdown[] = [
11+
index
12+
]
13+
const entry: DemoEntry = {
14+
name: 'InfiniteScroll',
15+
demoComponents,
16+
demoMarkdowns
17+
}
18+
export default entry

‎examples/views/View.vue

+52-1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import ElRadio from './ElRadio'
3838
import ElForm from './ElForm'
3939
import ElSwitch from './ElSwitch'
4040
import ElImage from './ElImage'
41+
import InfiniteScroll from './InfiniteScroll'
4142
import { DemoEntry, Markdown } from './type'
4243
4344
const demos = [
@@ -65,7 +66,8 @@ const demos = [
6566
ElRadio,
6667
ElForm,
6768
ElSwitch,
68-
ElImage
69+
ElImage,
70+
InfiniteScroll
6971
]
7072
const markdowns: anyObject<Markdown> = {}
7173
const components: anyObject<ComponentOptions> = {}
@@ -742,4 +744,53 @@ export default defineComponent({
742744
margin-bottom: 0;
743745
}
744746
}
747+
.infinite-scroll-md {
748+
.infinite-list {
749+
height: 300px;
750+
padding: 0;
751+
margin: 0;
752+
list-style: none;
753+
.infinite-list-item {
754+
display: flex;
755+
align-items: center;
756+
justify-content: center;
757+
height: 50px;
758+
background: #e8f3fe;
759+
margin: 10px;
760+
color: #7dbcfc;
761+
}
762+
.infinite-list-item + .list-item {
763+
margin-top: 10px;
764+
}
765+
}
766+
.infinite-list-wrapper {
767+
height: 300px;
768+
text-align: center;
769+
.list {
770+
padding: 0;
771+
margin: 0;
772+
list-style: none;
773+
}
774+
775+
.list-item {
776+
display: flex;
777+
align-items: center;
778+
justify-content: center;
779+
height: 50px;
780+
background: #fff6f6;
781+
color: #ff8484;
782+
}
783+
784+
.list-item + .list-item {
785+
margin-top: 10px;
786+
}
787+
}
788+
p {
789+
display: block;
790+
margin-block-start: 1em;
791+
margin-block-end: 1em;
792+
margin-inline-start: 0px;
793+
margin-inline-end: 0px;
794+
}
795+
}
745796
</style>

0 commit comments

Comments
 (0)