uni-app 实现下拉懒加载的两种方式

短命女 2022-11-19 13:59 2180阅读 0赞

## 实现下拉加载的两种方式: ##

*  scrolltolower： 只占了页面的一部分，其事件处理在 method中；
 *  onReachBottom：整个页面，其事件处理与method平级；

#### 用scrolltolower实现 ####

1.  使用scroll-view 标签充当分页容器；
2.  绑定滚动条触底事件 scrolltolower；
3.  实现下拉加载逻辑；

**1，新建 scroll-view 标签，指定方向，触底函数；**

<scroll-view scroll-y @scrolltolower="handle" class="scrollHeight">
    	<view v-for="(item, index) in 40" :key="index">{
       { item }}</view>
    </scroll-view>

**2，指定scroll-view 标签高度；**

只有指定高度了，scrolltolower() 触底函数才能被触发；  
指定高度的时候如果上面有其他标签，就得减去其他标签的高度，在CSS里计算一下；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70]

.scrollHeight{ 
    	/* height: 屏幕的高度 - 头部标题 100vh: 就等于屏幕的高度，因为手机型号不一行高度可能不一样， 所以使用 100vh； */
    	height: calc(100vh - 36px);
    }

**3，实现逻辑处理**

当触底事件被触发后要做的逻辑：

1.  修改请求的参数 params: skip += limit
2.  重新发送请求 getDataList()
3.  请求成功后 对datas 的数据进行叠加

data(){ 
    	return { 
    		datas: [],
    		params: { 
    			// 给多少条数据
    			limit: 10,
    			// 要跳过多少条数据往后面添加
    			skip: 30
    		},
    		hasMore:true
    	}
    }
    getDataList(){ 
    	this.request({ 
    		url:"https://www.runoob.com/try/ajax/json_demo.json",
            // 这个参数不固定, 每次下拉的时候都去请求新的参数
            data: this.params
    	}).then(res=> { 
    		if(res.data.length == 0){  // 判断下拉刷新还有没有下一页数据
    			this.hasMore = false
    			return
    		}
    		if(this.datas.length == 0){  // 第一次发送的请求
    			// 这里写第一次就加载好，不需要下拉刷新的数据
    			...
    		}
    		// 对数据进行叠加
    		this.datas = [...this.datas, ...res.data]
        }).catch(err=>{ 
            console.log(err)
        })
    }
    handle(){ 
    	// 1. 修改请求的参数 params: skip += limit
    	// 2. 重新发送请求 getDataList()
    	// 3. 请求成功后 对datas 的数据进行叠加
    	if (this.hasMore){ 
    		this.params.skip += this.params.limit
    		getDataList()
    	} else { 
    		uni.showToast({ 
    			title: "没有数据了",
    			icon: "none"   // 次处必须有，如果没有就默认返回成功的icon
    		})
    	}
    	
    }
    mounted(){ 
    	getDataList()
    }

#### 用onReachBottom实现 ####

用onReachBottom更为简单，不用设置宽高，如果页面触底了会自动触发onReachBottom函数

onReachBottom(){ 
    	// 如果整个页面触底了就会自动触发这个函数
    	...
    }
    method: { 
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70]: /images/20221119/fef08f3812c44099a4d62dc93f2e8991.png