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

【关键词】

底部、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>

截图：

​​

方法二：设置postion为fixed，margin-top为屏幕的高度减去组件的高度。这种方法需要拿到屏幕高度才能进行设置，代码上更复杂一些，推荐使用第一种方式来实现。

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

截图：

 

 

 欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh​

​