HarmonyOS 鸿蒙Next中【快应用】组件如何页面底部显示

HarmonyOS 鸿蒙Next中【快应用】组件如何页面底部显示 【关键词】

底部、postion

【问题背景】

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

【实现方法】

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

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

截图：

cke_3087.png

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

截图：

60C5C0C36E9EB7C33352264A884C1D1305B80763CAC43F03B2B9D8535EA2858A.png


更多关于HarmonyOS 鸿蒙Next中【快应用】组件如何页面底部显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS 鸿蒙Next中【快应用】组件如何页面底部显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，快应用页面底部显示可以通过<container>组件结合<div>和<text>实现。首先，使用<container>包裹页面内容，然后在<container>内使用<div>设置样式为position: fixed; bottom: 0;，确保内容固定在页面底部。示例代码如下：

<container>
  <div style="position: fixed; bottom: 0; width: 100%; text-align: center;">
    <text>底部内容</text>
  </div>
</container>

此代码将文本“底部内容”固定在页面底部。

回到顶部