uniapp设置触底事件

在`uniapp`中，可以使用`@scrolltolower`事件来监听`scroll-view`组件触底事件。具体实现步骤如下：

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

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

2. 在组件对应的`methods`中编写`scrollToLower`方法，例如：

methods: {
  scrollToLower() {
    // 触底事件处理逻辑
    console.log('触底了');
  }
}

当用户滑动`scroll-view`组件到底部时，就会触发`scrollToLower`方法，您可以在该方法中实现相应的业务逻辑。

相关问题

uniapp滚动触底

uniapp的生命周期onReachBottom是指当页面滚动到底部时触发的事件，常用于上拉加载下一页数据。但需要注意的是，如果使用scroll-view导致页面没有滚动，则触底事件不会被触发。如果使用scroll-view组件时，onReachBottom方法不起作用，可以按照scroll-view组件的页面触底加载更多的方法处理，或者在uniapp的插件市场搜索其它方法。同时，需要定义页面底部的触发距离。需要注意的是，onReachBottom事件只是页面滚动到底部的事件，不是scroll-view滚到底的事件。相关注意事项需要仔细阅读。

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 ]