114 lines
11 KiB
JSON
114 lines
11 KiB
JSON
{
|
|
"slug": "infinitescroll",
|
|
"curated": true,
|
|
"mode": "scenarios",
|
|
"examples": [
|
|
{
|
|
"id": "infinitescroll-ex-1",
|
|
"title": "默认与常用变体",
|
|
"titleSrc": "demo",
|
|
"desc": "",
|
|
"html": "<div class=\"demo-block\">\n <div class=\"row kole-infinitescroll\">\n <div class=\"kole-infinitescroll-scroll\" role=\"feed\" aria-label=\"动态列表\">\n <div class=\"kole-infinitescroll-scroll-item\">活动记录 1</div>\n <div class=\"kole-infinitescroll-scroll-item\">活动记录 2</div>\n <button class=\"kole-infinitescroll-button\" type=\"button\" data-load>加载更多</button>\n </div>\n </div>\n</div>",
|
|
"preview": {
|
|
"show": [
|
|
[
|
|
0,
|
|
2
|
|
]
|
|
],
|
|
"hide": [
|
|
[
|
|
1
|
|
],
|
|
[
|
|
0,
|
|
0
|
|
],
|
|
[
|
|
0,
|
|
1
|
|
],
|
|
[
|
|
0,
|
|
3
|
|
],
|
|
[
|
|
0,
|
|
2,
|
|
0
|
|
]
|
|
],
|
|
"mode": "scenarios"
|
|
},
|
|
"previewSafe": true,
|
|
"previewUnsafeReasons": [],
|
|
"source": "curated",
|
|
"code": {
|
|
"html": "<div class=\"kole-infinitescroll\">\n <div class=\"kole-infinitescroll-scroll\" role=\"feed\" aria-label=\"动态列表\">\n <div class=\"kole-infinitescroll-scroll-item\">活动记录 1</div>\n <div class=\"kole-infinitescroll-scroll-item\">活动记录 2</div>\n <button class=\"kole-infinitescroll-button\" type=\"button\">加载更多</button>\n </div>\n</div>",
|
|
"jsx": "import { useState } from 'react';\nimport { KoleInfiniteScroll } from 'kole-ui/react';\n\nfunction Demo() {\n const [items, setItems] = useState(['活动记录 1', '活动记录 2']);\n const [loading, setLoading] = useState(false);\n const [status, setStatus] = useState('more');\n\n function loadMore() {\n setLoading(true);\n setTimeout(() => {\n setItems((prev) => {\n const next = prev.concat('活动记录 ' + (prev.length + 1));\n if (next.length >= 3) setStatus('done');\n return next;\n });\n setLoading(false);\n }, 600);\n }\n\n return (\n <KoleInfiniteScroll\n items={items}\n loading={loading}\n status={status}\n height=\"180px\"\n onLoadMore={loadMore}\n />\n );\n}",
|
|
"vue3": "<template>\n <KoleInfiniteScroll\n :items=\"items\"\n :loading=\"loading\"\n :status=\"status\"\n height=\"180px\"\n @load=\"loadMore\"\n />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleInfiniteScroll } from 'kole-ui/vue3';\n\nconst items = ref(['活动记录 1', '活动记录 2']);\nconst loading = ref(false);\nconst status = ref('more');\n\nfunction loadMore() {\n loading.value = true;\n setTimeout(() => {\n items.value = items.value.concat('活动记录 ' + (items.value.length + 1));\n if (items.value.length >= 3) status.value = 'done';\n loading.value = false;\n }, 600);\n}\n</script>",
|
|
"vue2": "<template>\n <div>\n <KoleInfiniteScroll\n :items=\"items\"\n :loading=\"loading\"\n :status=\"status\"\n height=\"180px\"\n @load=\"loadMore\"\n />\n </div>\n</template>\n\n<script>\nimport { KoleInfiniteScroll } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleInfiniteScroll },\n data() {\n return {\n items: ['活动记录 1', '活动记录 2'],\n loading: false,\n status: 'more',\n };\n },\n methods: {\n loadMore() {\n var self = this;\n self.loading = true;\n setTimeout(function () {\n self.items = self.items.concat('活动记录 ' + (self.items.length + 1));\n if (self.items.length >= 3) self.status = 'done';\n self.loading = false;\n }, 600);\n },\n },\n};\n</script>",
|
|
"tsx": "import { useState } from 'react';\nimport { KoleInfiniteScroll } from 'kole-ui/react';\n\nfunction Demo(): JSX.Element {\n const [items, setItems] = useState(['活动记录 1', '活动记录 2']);\n const [loading, setLoading] = useState<boolean>(false);\n const [status, setStatus] = useState<string>('more');\n\n function loadMore(): JSX.Element {\n setLoading(true);\n setTimeout(() => {\n setItems((prev) => {\n const next = prev.concat('活动记录 ' + (prev.length + 1));\n if (next.length >= 3) setStatus('done');\n return next;\n });\n setLoading(false);\n }, 600);\n }\n\n return (\n <KoleInfiniteScroll\n items={items}\n loading={loading}\n status={status}\n height=\"180px\"\n onLoadMore={loadMore}\n />\n );\n}\n\nexport default Demo;",
|
|
"vue3ts": "<template>\n\n <KoleInfiniteScroll\n :items=\"items\"\n :loading=\"loading\"\n :status=\"status\"\n height=\"180px\"\n @load=\"loadMore\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleInfiniteScroll } from 'kole-ui/vue3';\n\nconst items = ref(['活动记录 1', '活动记录 2']);\nconst loading = ref<boolean>(false);\nconst status = ref<string>('more');\n\nfunction loadMore() {\n loading.value = true;\n setTimeout(() => {\n items.value = items.value.concat('活动记录 ' + (items.value.length + 1));\n if (items.value.length >= 3) status.value = 'done';\n loading.value = false;\n }, 600);\n}\n</script>",
|
|
"vue2ts": "<template>\n\n <div>\n <KoleInfiniteScroll\n :items=\"items\"\n :loading=\"loading\"\n :status=\"status\"\n height=\"180px\"\n @load=\"loadMore\"\n />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleInfiniteScroll } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleInfiniteScroll },\n data(): Record<string, unknown> {\n return {\n items: ['活动记录 1', '活动记录 2'],\n loading: false,\n status: 'more',\n };\n },\n methods: {\n loadMore(): void {\n var self = this;\n self.loading = true;\n setTimeout(function () {\n self.items = self.items.concat('活动记录 ' + (self.items.length + 1));\n if (self.items.length >= 3) self.status = 'done';\n self.loading = false;\n }, 600);\n },\n },\n};\n</script>"
|
|
},
|
|
"notes": [
|
|
"依据 frameworks/InfiniteScroll.html 内联脚本：点击 [data-load] 追加一条「活动记录 3」后把按钮置为已加载；对应 props items/loading/status/height 与 onLoadMore（见 frameworks/InfiniteScroll.jsx 的 status='more' 分支文案「加载更多 / 加载中… / 已全部加载」）"
|
|
]
|
|
},
|
|
{
|
|
"id": "infinitescroll-ex-2",
|
|
"title": "状态与使用场景",
|
|
"titleSrc": "demo",
|
|
"desc": "",
|
|
"html": "<div class=\"demo-block\">\n <div class=\"row kole-infinitescroll\">\n <div class=\"kole-infinitescroll-surface\" style=\"padding:12px\">逐批加载动态流或长列表，明确展示加载中、完成和可重试状态。</div>\n <span class=\"kole-infinitescroll-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n </div>\n <p class=\"demo-note\">零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>\n</div>",
|
|
"preview": {
|
|
"show": [
|
|
[
|
|
0,
|
|
3
|
|
]
|
|
],
|
|
"hide": [
|
|
[
|
|
1
|
|
],
|
|
[
|
|
0,
|
|
0
|
|
],
|
|
[
|
|
0,
|
|
1
|
|
],
|
|
[
|
|
0,
|
|
2
|
|
],
|
|
[
|
|
0,
|
|
3,
|
|
0
|
|
]
|
|
],
|
|
"mode": "scenarios"
|
|
},
|
|
"previewSafe": true,
|
|
"previewUnsafeReasons": [],
|
|
"source": "curated",
|
|
"code": {
|
|
"html": "<div class=\"kole-infinitescroll\">\n <div class=\"kole-infinitescroll-surface\" style=\"padding:12px\">逐批加载动态流或长列表，明确展示加载中、完成和可重试状态。</div>\n <span class=\"kole-infinitescroll-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</div>\n<p>零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>",
|
|
"jsx": "import { KoleInfiniteScroll } from 'kole-ui/react';\n\n<>\n <KoleInfiniteScroll items={['活动记录 1', '活动记录 2']} status=\"more\" height=\"180px\" />\n <KoleInfiniteScroll items={['活动记录 1', '活动记录 2']} loading status=\"loading\" height=\"180px\" />\n <KoleInfiniteScroll items={['活动记录 1', '活动记录 2', '活动记录 3']} status=\"done\" height=\"180px\" />\n</>",
|
|
"vue3": "<template>\n <KoleInfiniteScroll :items=\"items\" status=\"more\" height=\"180px\" />\n <KoleInfiniteScroll :items=\"items\" loading status=\"loading\" height=\"180px\" />\n <KoleInfiniteScroll :items=\"done\" status=\"done\" height=\"180px\" />\n</template>\n\n<script setup>\nimport { KoleInfiniteScroll } from 'kole-ui/vue3';\n\nconst items = ['活动记录 1', '活动记录 2'];\nconst done = ['活动记录 1', '活动记录 2', '活动记录 3'];\n</script>",
|
|
"vue2": "<template>\n <div>\n <KoleInfiniteScroll :items=\"items\" status=\"more\" height=\"180px\" />\n <KoleInfiniteScroll :items=\"items\" loading status=\"loading\" height=\"180px\" />\n <KoleInfiniteScroll :items=\"done\" status=\"done\" height=\"180px\" />\n </div>\n</template>\n\n<script>\nimport { KoleInfiniteScroll } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleInfiniteScroll },\n data() {\n return {\n items: ['活动记录 1', '活动记录 2'],\n done: ['活动记录 1', '活动记录 2', '活动记录 3'],\n };\n }\n};\n</script>",
|
|
"tsx": "import { KoleInfiniteScroll } from 'kole-ui/react';\n\nexport default function KoleInfiniteScrollDemo(): JSX.Element {\n return (\n <>\n <KoleInfiniteScroll items={['活动记录 1', '活动记录 2']} status=\"more\" height=\"180px\" />\n <KoleInfiniteScroll items={['活动记录 1', '活动记录 2']} loading status=\"loading\" height=\"180px\" />\n <KoleInfiniteScroll items={['活动记录 1', '活动记录 2', '活动记录 3']} status=\"done\" height=\"180px\" />\n </>\n );\n}",
|
|
"vue3ts": "<template>\n\n <KoleInfiniteScroll :items=\"items\" status=\"more\" height=\"180px\" />\n <KoleInfiniteScroll :items=\"items\" loading status=\"loading\" height=\"180px\" />\n <KoleInfiniteScroll :items=\"done\" status=\"done\" height=\"180px\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleInfiniteScroll } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('状态与使用场景');\nconst items = ['活动记录 1', '活动记录 2'];\nconst done = ['活动记录 1', '活动记录 2', '活动记录 3'];\n</script>",
|
|
"vue2ts": "<template>\n\n <div>\n <KoleInfiniteScroll :items=\"items\" status=\"more\" height=\"180px\" />\n <KoleInfiniteScroll :items=\"items\" loading status=\"loading\" height=\"180px\" />\n <KoleInfiniteScroll :items=\"done\" status=\"done\" height=\"180px\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleInfiniteScroll } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleInfiniteScroll },\n data(): Record<string, unknown> {\n return {\n items: ['活动记录 1', '活动记录 2'],\n done: ['活动记录 1', '活动记录 2', '活动记录 3'],\n };\n }\n};\n</script>"
|
|
},
|
|
"notes": [
|
|
"依据 frameworks/InfiniteScroll.jsx 的 status 三态分支（more/loading/done 对应按钮文案「加载更多 / 加载中… / 已全部加载」）与演示页 section「状态与使用场景」的文案；status 取值见 data.json contract dims status:[more,loading,done]"
|
|
]
|
|
}
|
|
]
|
|
}
|