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

原创
2023/05/05 09:42
阅读数 66

【关键词】

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

截图:

cke_3087.png

方法二:设置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​

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部