scroll-view 锚点停留在底部

### 实现 `scroll-view` 锚点定位到底部

为了使 `scroll-view` 的锚点能够成功定位到底部，在微信小程序中需要确保几个关键配置：

#### WXML 结构
在页面结构文件 (WXML) 中定义 `scroll-view` 并为其指定唯一 ID 和必要的属性。对于想要滚动至底部的内容项也需赋予唯一的ID。

<scroll-view id="scrollView" class="container" scroll-y bindscrolltolower="bindScrollToLower">
  <!-- 其他内容 -->
  
  <view id="bottomAnchor">这是最底端</view>
</scroll-view>

#### WXSS 样式调整
样式表(WXSS)里，除了保证整个容器的高度外，还需特别注意设置 `.container` 类来控制布局行为，以及为特定元素提供足够的空间以便于触发滚动作业[^3]。

/* 设置页面高度 */
page {
  height: 100%;
}

.container {
  position: relative;
  height: calc(100vh - 状态栏高度); /* 减去顶部状态栏或其他固定头部占用的空间 */
}

#### JS 控制逻辑
通过 JavaScript 来动态改变 `scrollIntoView` 属性指向目标节点的 ID 或者直接操作 scrollTop 值让视图平滑移动到列表末端[^4]。

Page({
  data: {
    goIndex: ''
  },
  onLoad() {
    this.scrollToBottom();
  },
  scrollToBottom() {
    const query = wx.createSelectorQuery().in(this);
    query.select('#scrollView').boundingClientRect((rect) => {
      if (rect !== null && rect.height > 0){
        setTimeout(() => { // 需要等待渲染完成再执行
          this.setData({ 
            'goIndex': 'bottomAnchor' 
          });
        }, 50);
      }
    }).exec();
  }
})

上述方法适用于微信小程序环境下的解决方案；如果是针对 HTML5/CSS 场景，则可以利用原生浏览器支持的方式处理类似需求，比如使用纯 CSS Flexbox 或 Grid Layouts 自动填充剩余空间并结合 JavaScript API 如 Element.scrollIntoView 方法实现相同的效果[^2]。