uniapp监听页面滚动触底

在uniapp中监听页面滚动触底，可以使用uni-app提供的`onReachBottom`事件。当页面滚动到底部时，该事件会被触发。

具体实现步骤如下：

1. 在需要监听滚动触底的页面中，在`<template>`标签中添加`onReachBottom`属性，并指定一个方法名，如：

<template>
  <!-- 页面内容 -->
</template>

<script>
export default {
  methods: {
    // 滚动触底事件处理函数
    onReachBottom() {
      // 处理滚动触底相关逻辑
    }
  }
}
</script>

2. 在`onReachBottom`方法中，编写处理滚动触底相关逻辑的代码，如加载更多数据等。

需要注意的是，如果该页面是通过`<scroll-view>`组件实现滚动的，需要在`<scroll-view>`标签上添加`lower-threshold`属性，并设置一个阈值，表示滚动距离底部还有多少像素时触发`onReachBottom`事件。

<scroll-view lower-threshold="50" style="height: 200px;">
  <!-- 滚动内容 -->
</scroll-view>

以上就是在uniapp中监听页面滚动触底的实现方法。

相关问题

uniapp页面触底

在uni-app中，页面触底可以通过两种方式实现。第一种方式是使用onReachBottom()函数，在page.json的style下设置"enablePullDownRefresh": true，然后在页面的与生命周期函数同一级别下使用onReachBottom()函数来监听页面触底事件。例如：

onReachBottom(){
  console.log('已触底');
}

第二种方式是在子组件中使用滚动区域scroll-view来实现触底加载。具体步骤如下：

1. 添加scroll-view组件。

2. 设置height属性来控制滚动区域的高度。

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

除了以上两种方式，需要注意的是，在tab切换中无法使用onUnload()生命周期函数进行销毁。如果需要在切换页面时进行相应的销毁操作，可以在使用组件的主页面的切换方法中根据需要进行对应的销毁操作，以避免触底事件被多次触发。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [uniapp触底加载](https://blog.csdn.net/waterwo/article/details/123495849)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [uni-app在组件中的触底事件](https://blog.csdn.net/weixin_45901261/article/details/127056769)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

uniapp scroll-view触底

在 Uniapp 中使用 `scroll-view` 组件来实现触底加载更多的功能，可以通过监听 `scroll-view` 的 `scrolltolower` 事件来实现。具体的步骤如下：

1. 在 `scroll-view` 上绑定 `bind:scrolltolower` 事件，例如：

<scroll-view bind:scrolltolower="loadMoreData">
  <!-- 内容 -->
</scroll-view>

2. 在页面的 methods 中定义 `loadMoreData` 方法，用于触底加载更多的逻辑处理：

methods: {
  loadMoreData() {
    // 触底加载更多的逻辑处理代码
  }
}

3. 在 `loadMoreData` 方法中可以调用接口请求新数据，并将新数据追加到原有数据列表中，例如：

methods: {
  loadMoreData() {
    // 调用接口请求新数据
    api.getMoreData().then(res => {
      // 将新数据追加到原有数据列表中
      this.dataList = this.dataList.concat(res.data);
    });
  }
}

通过以上步骤，就可以实现在 Uniapp 中使用 `scroll-view` 组件触底加载更多的功能了。当 `scroll-view` 滚动到底部时，会触发 `scrolltolower` 事件，然后可以在对应的方法中进行加载更多数据的逻辑处理。