【快應用】組件如何頁面底部顯示

【關鍵詞】

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

​