【快应用】组件如何页面底部显示

华为开发者论坛

于 2023-05-05 09:37:59 发布

阅读量401

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_44708240/article/details/130500002

文章介绍了两种方法使组件在快应用的页面底部显示：一是设置position为fixed并设置bottom为0px；二是同样设置position为fixed，但通过margin-top设置为屏幕高度减去组件高度，不过这种方式更复杂。推荐使用第一种简洁的方式实现底部固定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【关键词】

底部、postion

【问题背景】

快应用中某个组件如果要实现在页面底部展示，该如何实现呢？

【实现方法】

可以通过设置postion为fixed，再设置margin-top属性和bottom属性来将组件在页面底部显示。

方法一：设置postion为fixed，bottom为0px

<template>
  <div class="container">
    <input type="button" value="ceshi" class="btn" style="position: fixed; bottom: 0px" />
  </div>
</template>
<style>
  .container {
    flex: 1;
    flex-direction: column;
  }
  .btn {
    width: 80%;
    background-color: #23ec2d;
    border: 1px solid #000000;
  }
</style>

截图：