首页 文章

Ionic2：如何使离子列表项目可点击？

提问于
浏览 次
0

我有一个页面来显示分支列表并选择一个分支转到下一页 .

如何使 ion-item 可点击，捕获点击并选择项目？

我尝试了这个代码，它的工作原理 . 但是，它显示了一个按钮列表 .

<ion-list>
    <ion-item *ngFor="let branch of branchArray">
       <button ion-button full (click)='goHome(branch)'>
          {{branch.name}}
       </button>              
    </ion-item>
 </ion-list>
ionic-framework ionic2

2 回答

  • 9

    我认为按钮显示是一个UI问题 . 由于我不知道应该如何显示的确切要求，请查看如何使用 ion-list here . 您也可以根据您的要求在CSS中设置样式 .

    至于可点击的部分：你也有用，但是，使项目可点击如下：

    <ion-list>
    <ion-item *ngFor="let branch of branchArray"  (click)='goHome(branch)'>
        <button ion-button full>
            {{branch.name}}
        </button>             
    </ion-item>
</ion-list>
    回复于
  • 2

    接受的答案并不完全正确 . Ionic文档说（现在，在回答时可能会有所不同）：

    如果基本项不可点击，则应将其写为<ion-item>元素 .

    然后

    当可以单击或点击项目时，应将属性ion-item添加到<button> .

    所以你应该使用这个代码：

    <ion-list>
    <button ion-item *ngFor="let branch of branchArray"  (click)='goHome(branch)'>
        <!-- Inner code here depending on your styling. -->
    </button>
</ion-list>

    这会改变ion-item的语义，然后相应地更新样式：你不需要破解你的CSS文件 .

    回复于

相关问题