Question

我创建了一些处理表单提交功能的组件。在这些组件的每一个中，我都希望将表单提交/取消按钮固定在视图的底部，就像通过ion-footer提供的功能一样。提交按钮需要引用组件中用于[disabled] +（点击）功能的变量+方法，例如[disabled] =“！formGroup.valid”（tap）=“ submitForm（）”

如果该成分是离子含量的子元素，则无法添加离子脚注，因为它将包含在离子含量之内，而不是低于离子含量。乍一看，在离子含量内部具有离子脚注似乎可以正确查看，但是渲染可能会有问题，尤其是在滚动情况下。我曾尝试设置一个具有固定位置/底部的强制底部CSS类，但当离子离子内部包含离子离子javascript时，它似乎覆盖了固定位置，因此似乎无法使用纯CSS解决方案。

<ion-content> 
    <a-form-component>
    </a-form-component>
</ion-content>
<ion-footer>
  <!-- add a-form-component's button here -->
</ion-footer>

关于如何实现所需功能的任何建议？

TIA

Answer 1

假设您有一个名为page的页面和一个名为cp的组件在page.html中，您拥有组件<cp></cp>

在cp.html内部，您有

<div>anything goes here</div>
<div>anything goes here</div>
<div>anything goes here</div>
<div>anything goes here</div>
<div id="the-footer">
    <button>login<button>
</div>

在page.scss内部：

  #the-footer{

         background-color: #efefef;
         text-align: center;
         position: fixed;
         width: 100%;
         bottom: 0px;
         z-index: 99999;
  }

这将获得与离子页脚相同的结果。

不管滚动如何，包含按钮的div始终可见。

希望有帮助

如何在离子含量中添加离子v3组件，但如何将该组件的子按钮放在ion-footer中

1 个答案: