uniapp项目使用onReachBottom函数实现请求下一页数据，使用onPageScroll函数获取页面滚动条的滚动高度

╰+哭是因爲堅強的太久メ 2022-11-06 14:53 8阅读 0赞

uniapp项目使用onReachBottom函数实现请求下一页数据，使用onPageScroll函数获取页面滚动条的滚动高度  
**一，需求**：如下图所示，当滚动条滚动到一定位置时要将红色框内的内容放到最顶部并且位置固定。

**二，实现内容：  
①需要获取滚动高度  
②滚动条触底时可请求下一页的数据**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]  
图片位置固定  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]  
**三，代码实现**  
可使用uni app提供的页面生命周期方法onReachBottom和onPageScroll实现  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 2]  
在onPageScroll 函数中，e.scrollTop可获取页面滚动高度  
使用onReachBottom函数，用于请求下一页数据

onPageScroll : function(e) { //nvue暂不支持滚动监听，可用bindingx代替
    		   // console.log("detail滚动距离为00=：" + e.scrollTop);
    			if(e.scrollTop> 140){
    				this.scrollFlag = true
    			}else{
    				this.scrollFlag = false
    			}
    		},
    		//页面触底了，请求下一页数据
    		onReachBottom(){
    			//console.log("页面触底了")
    			this.doBottomFn()
    		},

其他说明：  
使用scroll-view标签 也可以请求下一页数据，@scrolltolower绑定请求下一页的方法即可，但是使用scroll-view标签的话，会影响onPageScroll 函数的使用，也就是说我们获取不到页面滚动的高度，所以，在本案例中不再使用scroll-view标签去加载下一页的数据  
注意：使用scroll-view时，需要设置高度

<scroll-view  class="meet-content" scroll-y @scrolltolower="loadMore()">

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: /images/20221023/d2d2d28da53741b1a2b1b5967a315d63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]: /images/20221023/ea3fe2f7d08d44cdb4bfca8c900f9218.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 2]: /images/20221023/e6f33325a4b0473586329f1ea307eac4.png