我已经创建了一些处理表单提交功能的组件。在每个组件中,我希望表单的submit/cancel按钮固定在视图的底部,这与通过ion-footer提供的功能非常相似。提交按钮需要引用组件中的变量+方法来禁用+(点击)功能,例如disabled="!formGroup.valid“(点击)=”submitForm()“
如果组件是ion-content的子项,则无法添加ion-footer,因为它将包含在ion-content中,而不是在ion-content之下。乍一看,在ion-content中包含ion-footer似乎可以正常查看,但渲染可能会出现错误,特别是在滚动的情况下。我甚至还设置了一个固定位置/底部的强制底部css类,但是在ion-content内部,ionic javascript似乎覆盖了固定位置,所以一个纯粹的CSS解决方案似乎是不可能的。
<ion-content>
<a-form-component>
</a-form-component>
</ion-content>
<ion-footer>
<!-- add a-form-component's button here -->
</ion-footer>
对于如何实现所需的功能有什么建议吗?
提亚
发布于 2018-10-03 03:16:21
假设您在page.html
中有一个名为page
的页面和一个名为cp
的组件,您还有一个组件<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;
}
这将达到与ion-footer相同的结果。
无论滚动与否,包含该按钮的div都将始终可见。
希望能有所帮助
https://stackoverflow.com/questions/52614180
复制相似问题