使浮动操作按钮在 Ionic 2 应用程序中滚动答案

【问题标题】：Make Floating Action Buttons scrolling in Ionic 2 app使浮动操作按钮在 Ionic 2 应用程序中滚动
【发布时间】：2017-05-24 22:31:49
【问题描述】：

我正在尝试调整 Ionic 中的 FAB 以使它们随着我的内容滚动。如果我们参考离子示例：

<ion-fab top right edge>
<button ion-fab mini><ion-icon name="add"></ion-icon></button>
<ion-fab-list>
  <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
  <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
  <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
</ion-fab-list>
</ion-fab>

结果如下：

我想让这个 FAB 随内容一起滚动。我试图覆盖 Ionic CSS，但是当我更改位置属性时，它会使我的按钮消失..

提前感谢您的帮助

【问题讨论】：

标签： css ionic2

【解决方案1】：

你不能，因为这里的案例不是 css。 Ionic 将 FAB 按钮添加到 fixed-content 类，因此即使知道您可以使用 css 来操作 fab 和固定内容，它也不会与 scroll-content 一起滚动（我已经尝试在这里找到解决方案给你）。

操作 DOM 可能有效，从固定内容中取出 fab 并将其放入滚动内容中，使用 ElementRef, ViewChild, Renderer 来自 @angular/core（还没有尝试过）。

除了操作 DOM，另一个解决方案是创建自己的 FAB 按钮，这可能是一项艰巨的工作，但互联网上肯定有一些例子。

希望这会有所帮助。

【讨论】：