-
Notifications
You must be signed in to change notification settings - Fork 488
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(list): support scrollTo API to scroll to a specified element (#4863
) * feat(list): list组件虚拟列表支持滚动到指定元素 提供了滚动到指定元素的示例代码 closed #4750 * feat(list): 简化List组件的handleScrollTo closed #4863 * chore: update snapshot * chore: update docs --------- Co-authored-by: naturalshen <[email protected]> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Uyarn <[email protected]>
- Loading branch information
4 people
authored
Dec 25, 2024
1 parent
020f13a
commit b27a222
Showing
9 changed files
with
171 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,39 @@ | ||
| <template> | ||
| <t-list style="height: 300px" :scroll="{ type: 'virtual' }" | ||
| ><t-list-item v-for="(item, index) in listRef" :key="index"> | ||
| <t-list-item-meta :image="imageUrl" title="列表标题" :description="item.content" /></t-list-item | ||
| ></t-list> | ||
| <t-space direction="vertical"> | ||
| <t-list | ||
| ref="list" | ||
| style="height: 300px" | ||
| :scroll="{ type: 'virtual', rowHeight: 80, bufferSize: 10, threshold: 10 }" | ||
| > | ||
| <t-list-item v-for="(item, index) in listData" :key="index"> | ||
| <t-list-item-meta :image="imageUrl" title="列表标题" :description="item.content" /> | ||
| </t-list-item> | ||
| </t-list> | ||
| <t-space> | ||
| <t-button @click="handleScroll">滚动到指定节点</t-button> | ||
| </t-space> | ||
| </t-space> | ||
| </template> | ||
| <script lang="ts" setup> | ||
| import { ref } from 'vue'; | ||
| import { ListItemMetaProps } from 'tdesign-vue-next'; | ||
| const list = []; | ||
| import { ref, onMounted } from 'vue'; | ||
| import { ListItemMetaProps, ListInstanceFunctions } from 'tdesign-vue-next'; | ||
| const list = ref<ListInstanceFunctions>(); // 用于存储对 t-list 的引用 | ||
| const listData = ref([]); // 使用 ref 来存储列表数据 | ||
| const imageUrl: ListItemMetaProps['image'] = 'https://tdesign.gtimg.com/site/avatar.jpg'; | ||
| for (let i = 0; i < 3000; i++) { | ||
| list.push({ | ||
| content: `列表内容的描述性文字`, | ||
| onMounted(() => { | ||
| for (let i = 0; i < 3000; i++) { | ||
| listData.value.push({ content: `第${i + 1}个列表内容的描述性文字` }); | ||
| } | ||
| }); | ||
| const handleScroll = () => { | ||
| // scroll 属性需要设置 rowHeight 参数 | ||
| list.value?.scrollTo({ | ||
| // list 不存在嵌套，key 与 index 相同 | ||
| index: 30, | ||
| behavior: 'smooth', | ||
| }); | ||
| } | ||
| const listRef = ref(list); | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,39 @@ | ||
| <template> | ||
| <t-list style="height: 300px" :scroll="{ type: 'virtual' }" | ||
| ><t-list-item v-for="(item, index) in listRef" :key="index"> | ||
| <t-list-item-meta :image="imageUrl" title="列表标题" :description="item.content" /></t-list-item | ||
| ></t-list> | ||
| <t-space direction="vertical"> | ||
| <t-list | ||
| ref="list" | ||
| style="height: 300px" | ||
| :scroll="{ type: 'virtual', rowHeight: 80, bufferSize: 10, threshold: 10 }" | ||
| > | ||
| <t-list-item v-for="(item, index) in listData" :key="index"> | ||
| <t-list-item-meta :image="imageUrl" title="列表标题" :description="item.content" /> | ||
| </t-list-item> | ||
| </t-list> | ||
| <t-space> | ||
| <t-button @click="handleScroll">滚动到指定节点</t-button> | ||
| </t-space> | ||
| </t-space> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import { ref } from 'vue'; | ||
| const list = []; | ||
| import { ref, onMounted } from 'vue'; | ||
| const list = ref(); // 用于存储对 t-list 的引用 | ||
| const listData = ref([]); // 使用 ref 来存储列表数据 | ||
| const imageUrl = 'https://tdesign.gtimg.com/site/avatar.jpg'; | ||
| for (let i = 0; i < 3000; i++) { | ||
| list.push({ content: `列表内容的描述性文字` }); | ||
| } | ||
| const listRef = ref(list); | ||
| onMounted(() => { | ||
| for (let i = 0; i < 3000; i++) { | ||
| listData.value.push({ content: `第${i + 1}个列表内容的描述性文字` }); | ||
| } | ||
| }); | ||
| const handleScroll = () => { | ||
| // scroll 属性需要设置 rowHeight 参数 | ||
| list.value?.scrollTo({ | ||
| // list 不存在嵌套，key 与 index 相同 | ||
| index: 30, | ||
| behavior: 'smooth', | ||
| }); | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters