uniapp触底加载

Posted 2022-11-14 MikrokosmosRun

文章目录

• 一、onReachBottom()函数
• • 首先，在page.json的style下设置
  • 然后在页面使用即可，与生命周期函数同一级别
• 二、在子组件中使用滚动区域scrow-view触底加载
• • 1.添加scroll-view组件
  • 2.设置height
  • 3.在methods方法中写入触底加载的业务逻辑

---

一、onReachBottom()函数

首先，在page.json的style下设置

"pages": [ 
		
			"path": "pages/index/index",
			"style": 
				"navigationBarTitleText": "uni-app",
				"enablePullDownRefresh": true //设置参数为true
				"onReachBottomDistance":20, //距离底部多远时触发 单位为px
			
		
	]

然后在页面使用即可，与生命周期函数同一级别

onReachBottom()
		console.log('已触底');
    
,

二、在子组件中使用滚动区域scrow-view触底加载

在自定义组件中onReachBottom触底加载事件不起作用，但是我们在业务需求中需要实现此功能，这里可以借用scroll-view 组件。

1.添加scroll-view组件

在子组件外部加上scroll-view 组件，并允许纵向滚动（scroll-y=“true”）。

<scroll-view @scrolltolower="lowerBottom" scroll-y="true" class="scrollHeight">
//组件内容
</scroll-view>

2.设置height

使用竖向滚动时，需要给一个固定高度，通过 class 设置 height。

.scrollHeight 
  max-height: 100vh;

3.在methods方法中写入触底加载的业务逻辑

lowerBottom() 
	console.log("触底加载");
,