scroll-view 检测到底部

### 实现 `scroll-view` 滚动到底部的检测

在微信小程序中，为了监听 `scroll-view` 的滚动行为并判断其是否到达底部，可以通过设置 `bindscrolltolower` 事件来实现这一功能。该事件会在组件滚动至最底端时触发。

对于更精细控制的需求，还可以利用 `bindscroll` 事件配合自定义逻辑完成更加复杂的业务场景。例如，在某些情况下可能希望提前加载更多内容而不是等到完全触底再做处理。此时就可以通过计算当前滚动位置与总高度的比例来进行预判[^1]。

#### 使用 `bindscrolltolower`

这是最为简单直接的方式：

<scroll-view scroll-y="true" bindscrolltolower="loadMore">
    <!-- 列表项 -->
</scroll-view>

对应 JavaScript 文件中的函数如下所示：

Page({
  loadMore() {
      console.log('已经滚动到底部');
      // 加载更多数据或其他操作...
  }
})

这种方法适用于大多数基本需求，但对于一些特殊应用场景（如懒加载图片），则需采用更为灵活的做法。

#### 自定义滚到底部判定逻辑

如果想要实现更精确的控制，可以使用 `bindscroll` 结合页面的高度信息来自行判断是否接近或达到底部:

<scroll-view id="scrollView" scroll-y="true" lower-threshold="50" bindscroll="onScrollViewScroll">
    <!-- 内容区 -->
</scroll-view>

JavaScript 部分代码示例如下：

import { createSelectorQuery } from 'weixin-js-sdk';

Page({
  data: {
    scrollViewHeight: 0,
    contentHeight: 0,
  },

  onLoad(options) {
    this.queryContentSize();
  },
  
  queryContentSize(){
    const query = wx.createSelectorQuery().in(this);
    
    query.select('#scrollView').boundingClientRect((rect)=>{
        if (rect){
            this.setData({ scrollViewHeight : rect.height });
        }
    }).exec();

    // 假设这里获取到了content的实际高度
    let totalContentSize = /* ... */;
    this.setData({ contentHeight: totalContentSize });
  },


  onScrollViewScroll(e) {
    const scrollTop = e.detail.scrollTop;
    const threshold = this.data.scrollViewHeight * 0.9; // 当剩余可滚动距离小于视口高度的90%时认为即将到达底部
    
    if ((this.data.contentHeight - scrollTop - this.data.scrollViewHeight) <= threshold ) {
       console.log('即将触及底部');
       // 执行加载更多等动作
    }
  }
});

上述方式提供了更大的灵活性，允许开发者根据实际需要调整何时启动特定的行为。