不定高度虚拟列表加分页

weixin_43897150

已于 2023-02-10 17:13:38 修改

阅读量527

点赞数

文章标签： javascript 前端 vue.js

于 2023-02-09 20:49:29 首次发布

本文链接：https://blog.csdn.net/weixin_43897150/article/details/128960353

版权

本文探讨如何在JavaScript和Vue.js中创建一个不定高度的虚拟列表，并结合分页功能，提高大型数据集的浏览性能。通过虚拟滚动，只渲染可视区域内的列表项，大大减少了内存和CPU的使用，提升用户体验。

摘要由CSDN通过智能技术生成

<template name="purchasingRequisition">
	<view style="background-color:#f2f2f2;" class="container" :style="{height: `${screenHeight}px`}">
		<cu-custom :bgColor="NavBarColor" :isBack="true">
			<block slot="content">{
  {title}}</block>
			<block slot="backText">返回</block>
		</cu-custom>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<scroll-view :scroll-y="true" class="scroll-view" @scrolltolower="onScrollReachBottom" @scroll="onScroll">
			<view class="content" :style="{position: 'absolute', transform: `translate3d(0, ${translateY}px, 0)`}">
				<uni-list v-if="current === 0" style="width: 100%;" class="scroll-list">
					<uni-list-item v-for="(item,index) in visibleList" :data-index="item.index" class="listItem" link="navigateTo" :key="index" @click="goDetailPage(item.id,item.sysOwnerCpy)">
						<template #body>
							<!-- #ifdef MP-WEIXIN -->
							<view class="list-item__item-wrap">
							<!-- #endif -->
								<view class="leftText">
									<view class="flow-key view">{
  {item.flowKey+':'+item.index}}</view>
									<view class="view">{
  {item.sysOwnerCpy}}</view>
									<view class="view">操作员：{
  {item.creator}}</view>
								</view>
								<view class="rightText">
									<view class="view time">{
  {item.createDate}}</view>
									<view class="money">￥100</view>
									<view>经办人：大山里</view>
								</view>
							<!-- #ifdef MP-WEIXIN -->
							</view>
							<!-- #endif -->
						</template>
					</uni-list-item >
					<uni-load-more :status=