uni-app实现列表懒加载

太过爱你忘了你带给我的痛 2022-10-27 01:56 736阅读 0赞

**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()
    			}
    			
    		}
    	}

发表评论取消回复

表情：

评论列表（有 0 条评论，736人围观）

还没有评论，来说两句吧...

相关阅读

相关如何实现懒加载

懒加载（Lazy Loading）是一种前端优化技术，它允许在页面加载时只加载当前可见区域内的内容，而延迟加载其他不可见区域的内容，从而提高页面加载速度和性能。常见的应用场景是

系统管理员/ 2024年03月23日 22:06/ 0 赞/ 61 阅读

相关 java懒加载实现

![62e221c027914be09a29415a5915be21.jpeg][] 懒加载，也称为“不需要”加载，是一种内存管理方式。在 Java中，当一个类不再使用时，就

Myth丶恋晨/ 2023年10月09日 20:13/ 0 赞/ 69 阅读

相关懒加载

<script type="text/javascript"> // 懒加载 // getBoundCl

向右看齐/ 2023年08月17日 15:55/ 0 赞/ 200 阅读

相关 uniapp实现瀑布流懒加载实现和无限上拉加载更多

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

ゞ浴缸里的玫瑰/ 2023年01月01日 03:49/ 0 赞/ 446 阅读

相关懒加载

为什么要使用懒加载？当我们进入到某个页面的时候，会有很多的图片，有些图片可能在下面，当我们点进页面但没有滑动全部展示时，其实下面的图片是没有啥作用的，白加载了，还降低网

青旅半醒/ 2022年12月13日 00:44/ 0 赞/ 341 阅读

相关懒加载(Lazy Loading) - MyBatis懒加载 - Spring懒加载

文章目录懒加载(Lazy Loading) MyBatis中懒加载的使用 Spring中懒加载的使用懒加载(

Dear 丶/ 2022年12月10日 15:53/ 0 赞/ 451 阅读

相关 uni-app实现列表懒加载

html中 <view v-for="(item,index) in resultList" :key="index" class="item"> </vie

太过爱你忘了你带给我的痛/ 2022年10月27日 01:56/ 0 赞/ 737 阅读

相关懒加载

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

快来打我*/ 2022年05月28日 05:35/ 0 赞/ 447 阅读

相关图片懒加载实现

现在网站页面内容越来越丰富，图片内容也越来越多，而图片过多会导致网页文件过大，从而引发加载缓慢的问题，而图片懒加载就是为解决这一问题而生。首先我们来讲Jquery的懒加载控

我会带着你远行/ 2021年09月20日 09:08/ 0 赞/ 714 阅读

相关懒加载

懒加载 <template> <view> <scroll-view :scroll-into-view="'ss' + curr

亦凉/ 2021年07月25日 12:19/ 0 赞/ 806 阅读