uniapp固定滚动到底部

### 实现 UniApp 页面中内容滚动到底部

为了实现在 UniApp 中页面或元素自动滚动到底部的效果，可以通过 JavaScript 和 CSS 结合的方式完成。具体来说：

#### 使用 `scroll-view` 组件配合 JavaScript 方法

在 UniApp 提供的组件库中，有一个名为 `scroll-view` 的组件专门用于处理可滚动区域的内容显示[^2]。

<template>
  <view class="container">
    <!-- scroll-view 配置 -->
    <scroll-view 
      id="scrollView"
      :scroll-y="true" 
      :scroll-with-animation="true" 
      :enhanced="true"
      style="height: 300px;"
    >
      <block v-for="(item, index) in items" :key="index">
        <text>{{ item }}</text><br />
      </block>
    </scroll-view>

    <button type="primary" @click="scrollToBottom">Scroll to Bottom</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: Array.from({ length: 50 }, (_, i) => 'Item ' + (i + 1))
    };
  },
  methods: {
    scrollToBottom() {
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select('#scrollView').boundingClientRect(data => {
          if (data) {
            let scrollViewHeight = data.height;
            let windowHeight = uni.getSystemInfoSync().windowHeight;

            // 计算并设置滚动位置
            this.scrollTop = Math.max(0, scrollViewHeight - windowHeight);

            // 执行动画效果
            setTimeout(() => {  
              this.scrollTop += 1; // 触发一次更新以启动动画
            });
          }
        }).exec();
      });
    }
  }
};
</script>

上述代码片段展示了如何利用 `scroll-view` 组件创建一个垂直方向上可以滚动的内容区，并通过点击按钮触发 `scrollToBottom()` 函数来让视图平滑地滚到最底部。

另外，在某些场景下如果希望页面加载完成后立即执行滚动操作，则可以在生命周期钩子函数内调用此方法，比如 mounted 或者 onReady[]。

对于更复杂的布局需求或是想要调整更多细节参数的情况，请参阅官方文档获取更多信息关于 `scroll-view` 及其属性说明。