uniapp 按钮固定在底部

### 实现按钮固定在页面底部

在 UniApp 中，要将按钮固定在页面底部，可以利用 CSS 的 `position: fixed` 属性来实现。这种方式能够确保按钮始终位于屏幕的最下方，不会随着页面滚动而移动。

#### 使用 Flex 布局配合 Fixed 定位

通过组合使用 Flexbox 和固定的定位方式，可以使布局更加灵活和响应式友好：

<template>
  <view class="container">
    <!-- 主体内容 -->
    <scroll-view scroll-y class="content-area">
      <!-- 放置主要内容区域的内容 -->
      <text>这里是主要展示的商品列表</text>
    </scroll-view>

    <!-- 底部固定按钮 -->
    <view class="footer-button">
      <button type="primary">点击我</button>
    </view>
  </view>
</template>

<style scoped>
/* 设置容器样式 */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 占满整个视口高度 */
}

.content-area {
  flex-grow: 1; /* 自动扩展占据剩余空间 */
}

.footer-button {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: white;
  padding: 10px 0;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .1);
}
</style>

此方案采用了一个外层 `.container` 来包裹主体内容区和底部操作栏两部分，并给定合适的样式让它们按预期排列[^1]。

对于不同平台（如微信小程序与 H5），上述代码均能正常工作并保持一致的表现效果[^2]。