在Vue3中使用vue-virtual-scroll-list插件,可以按照以下步骤进行操作: 1. 安装 vue-virtual-scroll-list 插件 首先,你需要在你的Vue3项目中安装vue-virtual-scroll-list插件。你可以使用npm或yarn来安装: bash npm install vue-virtual-scroll-list --save # 或者 yarn
a. 首先,安装并引入vue-virtual-scroll-list插件。 b. 创建一个包含大量数据的列表组件。 c. 在该组件中,使用vue-virtual-scroll-list插件的<virtual-list>组件包裹列表,设置item-size属性以指定每个列表项的高度。 d. 使用v-for指令循环渲染列表项,并为每个列表项设置唯一的key属性。 e. 在列表项中展示数据。
export default { name: 'VirtualList', props: { // 定义你的 props,如列表数据等 }, setup(props) { const scrollContainer = ref(null); const visibleItems = computed(() => { // 根据滚动位置和容器高度计算可见项 }); const handleScroll = () => { // 处理滚动事件,更新可见项等 }; onMo...
安装的话这个插件有2个版本的,一个是1版本,目前更新到2版本了,二版本功能更加的强大。这里使用了1版本,通俗易懂一点。 npm install --save vue-virtual-scroll-list@1.1.3 1. 使用 在单页面中导入 import VirtualList from "vue-virtual-scroll-list"; 1. components: { VirtualList,//注册组件 }, 1. 2...
下面是vue3的写法 如果想查看vue2的写法 请移步至github链接 https://github.com/Arvin-Cui/vue-virtual-scroll/blob/master/pages/index/index.vue 1.index.vueindex.vue页面中加一个共用组件VirtualList.vue <template> <view> <VirtualList :listData="state.dateList" :itemSize="100"></VirtualList> ...
这个插件就是vue中的一个长列表的插件,官网地址: https://tangbc.github.io/vue-virtual-scroll-list/#/ 来看一下该组件的渲染情况: 可以明显看出,其渲染的时候,DOM节点数量都是固定的,并不会将所有的内容全部加载出来 6、自己实现vue虚拟列表 ① vue2 Ⅰ. 项目搭建 建一个新的文件夹,在这个文件夹中创建...
showItemList循环可视区域内的数据+缓存区的数据 <template> <list-item v-for="(item,index) in showItemList" :key="item.dataIndex+index" :index="item.dataIndex" :data="item.data" :style="item.style" @onSizeChange="sizeChangeHandle"> <template #slot-scope="slotProps"> <slot name="slo...
降低内存使用 实现方式: <template> <virtual-list :size="50" :remain="10"> <template #default="{ item }"> {{ item }} </template> </virtual-list> </template> import VirtualList from 'vue-virtual-scroll-list'; export default { components...
所以得出start.value = Math.floor(scrollTop / itemSize);如下图: v3 此时的start从item2开始渲染,但是由于前面我们复用了浏览器的滚动,所以实际渲染的DOM第一个已经在可视区外面了。此时可视区看见的第一个是item3,很明显是不对的,应该看见的是第一个是item2。 此时应该怎么办呢? 很简单,使用translate将...
</scroll-view> <view class="taskList" v-if="state.isShow"> <VirtualList :dateIndex="dateIndex" :listData="dateList" :itemSize="88"></VirtualList> </view> <view class="nodate" v-if="!state.isShow"> <view class="nodate_text"> <text class="name">暂无健康任务</text> </view...