uni-app实现列表懒加载

html中

<view v-for="(item,index) in resultList" :key="index" class="item">
</view>
<uni-load-more :status="loadStatus"></uni-load-more>

vue实例中

export default {
		data() {
			return {
				resultList: [],
				loadStatus: 'nomore',
				params:{
					pageNum: 1,
					pageSize: 10,
					corpcode: '',
					corpname: ''
				},
				pageCount: 0
			};
		},
		//下拉刷新
		onPullDownRefresh() {
			this.params.pageNum = 1
			this.getResultList()
		},
		//上拉加载更多
		onReachBottom(){
			if(this.params.pageNum < this.pageCount){
				this.params.pageNum += 1
				this.getResultList()
			}
		},
		onLoad(query){
			if(query.corpcode && query.corpname){
				this.params.corpcode = query.corpcode
				this.params.corpname = query.corpname
				this.getResultList()
			}
		},
		methods:{
			getResultList(){
				this.loadStatus = 'loading'
				this.$api.getERegister(this.params).then(res => {
					this.dataHandle(res)
				})
			},
			dataHandle(res){
				if(this.params.pageNum === 1){
					this.resultList = []
				}
				this.resultList.push(...res.data.list)
				this.pageCount = res.data.pages
				if(this.params.pageNum >= this.pageCount){
					this.loadStatus = 'nomore'
				}else{
					this.loadStatus = 'more'
				}
				uni.stopPullDownRefresh()
			}
			
		}
	}
### uni-app实现动态懒加载树形结构 在uni-app中构建具有动态懒加载特性的树形结构,能够显著提升应用性能和用户体验。对于大型数据集而言,一次性加载所有节点不仅消耗资源而且影响响应速度。 #### 使用 `schema2code` 工具生成的基础框架 初始阶段可以通过工具如[schema2code]自动生成基本的无限级别分类页面[^1]。然而,默认情况下这些页面仅提供了最基础的功能——例如添加新项时手动输入父类别ID以及平铺展示所有的条目而忽略了层次间的关联性。为了满足更复杂的需求,则需要进一步定制化开发来增强功能特性。 #### 集成虚拟滚动优化渲染效率 考虑到DOM元素过多可能导致浏览器卡顿现象,在设计上引入了虚拟滚动技术以解决这个问题。此方案允许开发者只渲染当前视窗内的项目,从而减少不必要的计算开销并提高交互流畅度[^3]。 #### 应用DCloud插件市场的树形选择器组件 来自[DCloud 插件市场][^4] 的树形选择器是一个非常实用的选择之一。它内置了对多种操作模式的支持(比如多选/单选),更重要的是实现了按需加载子节点的数据机制—即所谓的“懒加载”。这意味着只有当用户展开某个特定分支时才会去请求相应的下级内容,而不是一开始就获取整个树状图谱的信息。 下面给出一段简单的代码片段用于演示如何配置这样一个具备懒加载能力的树控件: ```javascript // 假设已安装好所需依赖包... import TreeSelect from 'path-to-tree-select-component'; export default { components: {TreeSelect}, data() { return { treeData:[], // 存储从服务器端拉取到的顶层目录信息 lazyLoadOptions:{ loadMore:async (node)=>{ const response = await fetch(`/api/getChildren?parentId=${node.id}`); node.children=response.data; this.$forceUpdate(); // 强制刷新UI以便立即反映最新状态变化 } }, selectedItems:[], }; }, methods:{ handleSelectionChange(selection){ console.log('Selected items:', selection); this.selectedItems=selection; } } } ``` 上述示例展示了怎样定义一个异步函数作为回调参数传递给`loadMore`属性,每当有新的层级被打开时便会触发该逻辑向远程接口发起查询命令进而填充对应位置下的具体内容;同时监听选择了哪些具体的叶子结点,并保存起来供后续业务流程调用。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值