uniapp h5 触底加载
时间: 2023-08-30 08:05:24 浏览: 69
UniApp 支持使用 `onReachBottom` 事件来实现 h5 页面的触底加载。当页面滚动到底部时,会触发 `onReachBottom` 事件,可以在此事件中处理加载更多数据的逻辑。
具体实现步骤如下:
1. 在 `pages.json` 中配置页面,添加 `"onReachBottomDistance": 50`,这里的 `50` 表示触底距离,单位为 px,即距离底部 50px 时触发 `onReachBottom` 事件。
```json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
},
"onReachBottomDistance": 50
}
]
}
```
2. 在页面的 `.vue` 文件中,添加 `onReachBottom` 事件处理函数,例如:
```vue
<template>
<div>
<!-- 在此处展示数据列表 -->
</div>
</template>
<script>
export default {
data() {
return {
dataList: [] // 数据列表
}
},
onReachBottom() {
// 在此处处理加载更多数据的逻辑,例如从服务器获取数据
// 获取到新数据后,将其添加到 dataList 中
}
}
</script>
```
这样就可以实现 h5 页面的触底加载了。当页面滚动到底部时,会触发 `onReachBottom` 事件,调用相应的处理函数实现加载更多数据的逻辑。