| | |
|---|
| | | <template> |
|---|
| | | <PageWrapper class="virtual-scroll-demo"> |
|---|
| | | <Divider>基础滚动示例</Divider> |
|---|
| | | <div class="text-center mb-4"> |
|---|
| | | <a-button @click="vScrollRef?.scrollToTop()">滚动到顶部</a-button> |
|---|
| | | <a-button @click="vScrollRef?.scrollToBottom()" class="mx-2">滚动到底部</a-button> |
|---|
| | | <a-button @click="vScrollRef?.scrollToItem(scrollToItemIndex)" |
|---|
| | | >滚动到第 |
|---|
| | | <input-number |
|---|
| | | v-model:value="scrollToItemIndex" |
|---|
| | | class="!w-60px mx-1" |
|---|
| | | :min="1" |
|---|
| | | :max="data.length" |
|---|
| | | :precision="0" |
|---|
| | | size="small" |
|---|
| | | :controls="false" |
|---|
| | | @keydown.enter="vScrollRef?.scrollToItem(scrollToItemIndex)" |
|---|
| | | /> |
|---|
| | | 条 |
|---|
| | | </a-button> |
|---|
| | | </div> |
|---|
| | | <div class="virtual-scroll-demo-wrap"> |
|---|
| | | <VScroll :itemHeight="41" :items="data" :height="300" :width="300"> |
|---|
| | | <VScroll :itemHeight="41" :items="data" :height="300" :width="300" ref="vScrollRef"> |
|---|
| | | <template #default="{ item }"> |
|---|
| | | <div class="virtual-scroll-demo__item"> |
|---|
| | | {{ item.title }} |
|---|
| | |
|---|
| | | </div> |
|---|
| | | </PageWrapper> |
|---|
| | | </template> |
|---|
| | | <script lang="ts"> |
|---|
| | | import { defineComponent } from 'vue'; |
|---|
| | | import { VScroll } from '/@/components/VirtualScroll/index'; |
|---|
| | | <script lang="ts" setup> |
|---|
| | | import { PageWrapper } from '@/components/Page'; |
|---|
| | | import { VScroll } from '@/components/VirtualScroll'; |
|---|
| | | import { Divider, InputNumber } from 'ant-design-vue'; |
|---|
| | | import { ref } from 'vue'; |
|---|
| | | |
|---|
| | | import { Divider } from 'ant-design-vue'; |
|---|
| | | import { PageWrapper } from '/@/components/Page'; |
|---|
| | | const vScrollRef = ref<typeof VScroll>(); |
|---|
| | | const scrollToItemIndex = ref(1000); |
|---|
| | | |
|---|
| | | const data = (() => { |
|---|
| | | const arr: any[] = []; |
|---|
| | | for (let index = 1; index < 20000; index++) { |
|---|
| | |
|---|
| | | } |
|---|
| | | return arr; |
|---|
| | | })(); |
|---|
| | | export default defineComponent({ |
|---|
| | | components: { VScroll: VScroll, Divider, PageWrapper }, |
|---|
| | | setup() { |
|---|
| | | return { data: data }; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | </script> |
|---|
| | | <style lang="less" scoped> |
|---|
| | | .virtual-scroll-demo { |
|---|
