Press "Enter" to skip to content

小程序下拉加载更多(bindscrolltolower)不触发原因

在小程序中,你可以使用 scroll-view 组件的 bindscrolltolower 事件来监听滚动到底部的情况。当用户滚动到底部时,该事件会被触发,你可以在该事件的处理函数中执行加载更多数据的逻辑。

以下是如何使用 scroll-view 组件实现下拉到底部加载更多数据的示例:

  1. WXML 文件: 在你的WXML文件中,给 scroll-view 添加 bindscrolltolower 属性,并指定一个事件处理函数,如 loadMore
<scroll-view scroll-y="true" bindscrolltolower="loadMore" style="height: 100%">
  <!-- 你的列表内容 -->
</scroll-view>
  1. JS 文件: 在你的页面的JS文件中,定义 loadMore 函数来处理加载更多数据的逻辑。
Page({
  // 其他页面方法和数据...

  loadMore: function() {
    // 这里可以执行加载更多数据的逻辑
    // 可以调用API获取新数据,然后更新页面的data
    console.log("加载更多数据...");
  }
});

请确保 scroll-view 的高度已经设置,并且 scroll-y 属性设置为 true,以便允许垂直滚动。

当用户滚动到底部时,loadMore 函数将被调用,你可以在其中执行所需的加载更多数据的逻辑。如果你正在执行分页加载,你可能还需要维护一个表示当前页数的变量,并在每次加载更多数据时相应地更新它。

如果发现你的loadMore不触发

检查你的scroll-view,他需要被设置一个高度,你可以设置style=”height: 100%” 或者 style=”height: 100vh”

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注