Question

我按照此github post在Listview中执行浮动操作按钮。

所以我在我的应用程序中添加了以下两个插件：

NativeScript 2.x

   <?php
      $url = "localhost:8061";
      $db = "test";
      $username = "admin";
      $password = "123";

      #require_once('/Ripcord/src/Ripcord/ripcord.php');
      require_once __DIR__.'/Ripcord/src/Ripcord/ripcord.php';
      $common = ripcord::client(ODOO_URL . "/xmlrpc/2/common");
      $info = ripcord::client('https://demo.odoo.com/start')->start();
      list($url, $db, $username, $password) =
      array($info['host'], $info['database'], $info['user'], 
      $info['password']);
  ?>

NativeScript 3 +

tns plugin add nativescript-floatingactionbutton@^2.2.7

我在下面的html文件中添加了浮动操作按钮（FAB）：

编辑：

html页面

tns plugin add nativescript-floatingactionbutton

ts档案：

<StackLayout class="parent">

 <GridLayout rows="*, auto">

 <ListView row="0" rowSpan="2" [items]="notiAlertList" class="listview" height="180" *ngIf="notificationVisible">

    <ng-template let-item="item">

      <GridLayout rows="auto" columns="3*, auto">

        <StackLayout row="0" col="0">
          <Label [text]="item.name" class="item-name"></Label>
          <Label [text]="item.category" class="item-culture"></Label>
          <Label [text]="item.description" class="item-comments"></Label>

        </StackLayout>

        <Label [text]="item.time" class="item-time" row="0" col="1"></Label>


      </GridLayout>

    </ng-template>


  </ListView>

  <FAB:fab tap="fabTap" row="1" icon="res://three_dots" rippleColor="#f1f1f1" class="fab-button" />

</GridLayout>

</StackLayout>

css文件：

import { registerElement } from "nativescript-angular/element-registry";


  public constructor(private router: Router) {


 // registerElement("Fab", () => require("nativescript-floatingactionbutton").Fab);// If I add this line application getting crash when coming onto this page.


  }

我无法看到浮动动作按钮。我不知道我哪里做错了，请帮帮我。

Answer 1

你可能有2个问题。什么是fab-button的css，iOS要求View组件的高度/宽度呈现。此外，您的布局还有一些可以清理的东西，可以提高性能，您可以根据需要改变一些内容。如果要将FAB浮动到列表视图上，则应将listview包装在包含2行的网格中，将listview放在第0行，使用rowSpan=2，然后将FAB放在第1行，并将其与css对齐（水平 - 对齐和垂直对齐）。希望有所帮助。

<FAB #createEventFab row="1" col="0" (tap)="goToCreateEvent($event)" icon="res://ic_add_white" rippleColor="#f1f1f1" class="create-event-fab-button"></FAB>

同样完成registerElement：

import { Fab } from "nativescript-floatingactionbutton";
import { registerElement } from "nativescript-angular/element-registry";
registerElement("Fab", () => Fab);

Angular2 nativescript中未显示浮动操作按钮（FAB）

1 个答案: