1

我们正在尝试将复选框和按钮放在我们的 android 应用程序的同一行中。我们正在使用 Ionic 4 和 Cordova 9 来构建 Andriod 应用程序。

所以我们使用了以下代码片段：

<ion-content>
<ion-item-sliding *ngFor="let test of testList">
<ion-item>

 <!-- check box to select user-->

<ion-checkbox color="secondary" [(ngModel)]="test.testId" 
(click)="selectUser(test .testId )" ng-true-value="right" ng-false- value="wrong" >    </ion-checkbox>

<!-- button  to view user-->

<ion-label text-wrap>
<h3>Test</h3>
<p>Test</p>
<button ion-button color="danger" block  (click)="viewUser(test .testId )">View User</button>
</ion-label>
</ion-item>
</ion-item-sliding>
</ion-content>

当我们单击按钮时，将触发复选框单击事件。即使我们在这种情况下单击行中的任意位置，也会调用复选框单击事件。

任何帮助将非常感激。

提前致谢。

4

1 回答 1

2

我检查了 ion-checkbox 元素和结果，这是一个错误，或者确切地说是 ionic, ionic bug report的实施错误。

检查错误

简而言之，在 ion-checkbox 内部有一个触发事件点击的按钮，但是该按钮具有 css 属性来获取 ion-item 的所有宽度和高度，并且该按钮位于“shadow DOM”内部，因此很难覆盖它特性。

但是，如果您需要临时修复。

我看到 ion-checkbox 里面的这个按钮有一个 z-index: 2 属性，所以给 ion-label 一个 z-index: 3 ，这样按钮的空间不会触发，但复选框的空间仍然有效。

暂时解决

添加您页面的 .scss

ion-label{
   z-index: 3;
}

另外，一个建议是在点击 ion-item 的空间时禁用效果，这将改善用户体验，因为在点击空白时显示效果并且不触发动作是不好的。

编辑

我的框架版本。

离子，科尔多瓦版本

我希望我有帮助:)

于 2019-08-13T15:33:58.073 回答