Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 691efb2

Browse files
committed
style: update scroll-cache demo UI
1 parent 9e0feba commit 691efb2

File tree

6 files changed

+39
-19
lines changed

6 files changed

+39
-19
lines changed

‎build/vite/optimize.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const include = [
2323
'vant/es/tabbar/style/index',
2424
'vant/es/tabbar-item/style/index',
2525
'vant/es/list/style/index',
26+
'vant/es/text-ellipsis/style/index',
2627
'unplugin-vue-router/runtime',
2728
'unplugin-vue-router/data-loaders',
2829
'unplugin-vue-router/data-loaders/basic',

‎src/locales/en-US.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,10 @@
4545
"label": "The current component will be cached"
4646
},
4747
"scrollCache": {
48-
"listItem": "Slide freely. When you get back, the roll position will still be there"
48+
"sectionTitle": "Section title",
49+
"sectionText": "Section text text text text text text text text text text",
50+
"finished": "Already at the bottom ~",
51+
"loading": "Loading..."
4952
},
5053
"login": {
5154
"login": "Sign In",

‎src/locales/zh-CN.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,10 @@
4545
"label": "当前组件将会被缓存"
4646
},
4747
"scrollCache": {
48-
"listItem": "随便滑滑,离开再回来时位置会保留不变哦"
48+
"sectionTitle": "段落标题",
49+
"sectionText": "段落内容段落内容段落内容段落内容段落内容段落内容",
50+
"finished": "已经到底啦 ~",
51+
"loading": "加载中..."
4952
},
5053
"login": {
5154
"login": "登录",

‎src/pages/scroll-cache/index.vue‎

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ defineOptions({
33
name: 'ScrollCache',
44
})
55
6-
const list = ref([])
76
const loading = ref(false)
87
const finished = ref(false)
8+
const list = ref([])
99
1010
function onLoad() {
1111
setTimeout(() => {
@@ -39,24 +39,33 @@ onBeforeRouteLeave(() => {
3939
<van-list
4040
v-model:loading="loading"
4141
:finished="finished"
42-
finished-text="已经到底啦 ~"
43-
loading-text="加载中..."
42+
:finished-text="$t('scrollCache.finished')"
43+
:loading-text="$t('scrollCache.loading')"
4444
@load="onLoad"
4545
>
46-
<van-cell
47-
v-for="(item, index) in list"
48-
:key="index"
49-
:border="false"
50-
class="mb-8 rounded-12"
51-
>
52-
<template #title>
53-
{{ $t('scrollCache.listItem') }}
54-
</template>
46+
<ul class="space-y-10">
47+
<li v-for="item in list" :key="item" class="p-3 flex gap-12">
48+
<div class="shrink-0">
49+
<div class="rounded-full bg-gray-500/20 flex h-48 w-48 items-center justify-center overflow-hidden">
50+
<span class="text-[16px] text-zinc-600 tabular-nums dark:text-zinc-400"> {{ item }} </span>
51+
</div>
52+
</div>
53+
54+
<div class="flex-1 min-w-0">
55+
<div class="mb-2 flex flex-row gap-1 w-full justify-between">
56+
<h3 class="text-[16px] text-zinc-600 font-semibold tracking-tight w-1/2 dark:text-white">
57+
<van-text-ellipsis :content="`${$t('scrollCache.sectionTitle')}`" />
58+
</h3>
59+
60+
<time class="text-[12px] text-zinc-400 tabular-nums">2025年05月16日</time>
61+
</div>
5562

56-
<template #value>
57-
{{ item }}
58-
</template>
59-
</van-cell>
63+
<p class="text-[14px] text-zinc-500">
64+
<van-text-ellipsis :rows="2" :content="$t('scrollCache.sectionText')" />
65+
</p>
66+
</div>
67+
</li>
68+
</ul>
6069
</van-list>
6170
</template>
6271

‎src/types/components.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,5 +32,6 @@ declare module 'vue' {
3232
VanSwitch: typeof import('vant/es')['Switch']
3333
VanTabbar: typeof import('vant/es')['Tabbar']
3434
VanTabbarItem: typeof import('vant/es')['TabbarItem']
35+
VanTextEllipsis: typeof import('vant/es')['TextEllipsis']
3536
}
3637
}

‎uno.config.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const BASE_FONT_SIZE = 4
1313

1414
export default defineConfig({
1515
shortcuts: [
16-
['btn', 'px-6 py-3 rounded-1 border-none inline-block bg-green-400 text-white cursor-pointer outline-hidden hover:bg-green-600 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
16+
['btn', 'px-6 py-3 rounded-4 border-none inline-block bg-green-400 text-white cursor-pointer outline-hidden hover:bg-green-600 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
1717
],
1818
presets: [
1919
presetWind4({
@@ -28,6 +28,9 @@ export default defineConfig({
2828
scale: 1.2,
2929
}),
3030
],
31+
postprocess: [
32+
createRemToPxProcessor(BASE_FONT_SIZE),
33+
],
3134
transformers: [
3235
transformerDirectives(),
3336
transformerVariantGroup(),

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /