问题标签 [ion-item]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
759 浏览

css - 位置:粘性不适用于内部元素

我已经实现了一个表格,它非常宽(比屏幕宽得多),并且用户可以水平滚动。

在最左边,是一个任务行组件,它有一个带有“粘性”标题的元素(.task-row_main 类),当水平滚动时,它不会移动,使用 css position: sticky

当我将任务行组件添加到ion-item中时,粘性标题会中断。水平滚动会导致粘性标题滚动到屏幕外。

但是当我不将它包装在一个ion-item中时,它可以工作:

如何使 position: sticky 适用于 an 内的元素<ion-item>

0 投票
1 回答
1349 浏览

ionic-framework - 离子4复选框问题阻止其他点击事件标签

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

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

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

任何帮助将非常感激。

提前致谢。

0 投票
1 回答
1033 浏览

angular - Ion-item-option 按钮需要点击两次

我有一个带有滑动项目的离子列表,并使用 for 循环创建这些项目。您可以单击项目本身,路由器导航到另一个页面。滑动项目时,会显示一个按钮。并且这个 Button 需要被点击两次(在 90% 的时间)才能触发。

我已经尝试过:

(单击)<ion-item><ion-avatar>标签。相同的行为:(我让用户创建一个项目并将其添加到列表中。这个列表存储在离子存储中 this.storage.set('list'); 并且离子列表是从上面的这个列表创建的.到目前为止一切都很好,这不会造成任何问题。并且列表项的数量也不会影响行为。离子列表在a中<div *ngIf = "loaded">,并且稍后加载设置为false,deleteHorse()因此这不会影响任何事情。当我单击 ion-item 本身,它的行为正确。是否该项目覆盖了 ion-item-options,因此,第二次单击实现为单击实际按钮而不是项目?我尝试添加带有滑动选项的硬编码项目-同样的事情......

并在github上报告给 ionic

console.log()也受此影响。

我真的很想使用它,但如果没有解决方案,我必须找到另一件事......提前感谢您的帮助。

编辑

我从ionicframework.com复制了代码 -> 相同的结果

并将我的代码改编为这个例子。更改项目选项的位置(从头到尾)使其更好一些(70% 的时间需要单击两次)

看看这里:github上的示例

0 投票
2 回答
1020 浏览

angular - Ionic 4 以编程方式更新 ion-item 背景

我有这样的事情:

我需要能够根据程序结果将 ion-item 的背景设置为介于红色和绿色之间的颜色,因此我"{'background-color':'rgb(#,#,0)'}"在 page.ts 中生成了一个值。

当值更改时,我无法使用[ngStyle]="{'--ion-background':'rgb(#,#,0)'}"ionic 已经将 html 扩展到其item-native组件中。我需要能够以item-native某种方式访问​​,[ngStyle]或者类似的ng-style东西[.item-native background]

还是有更简单/更好的方法来做到这一点?

0 投票
0 回答
527 浏览

angular - Ionic 3:离子列表未显示在离子项目内

我正在使用离子 v3。我正在尝试在 ion-item 中添加 ion-list 但它没有显示在浏览器中。

此外,它给我的<!--bindings={"ng-reflect-ng-if": "false"}-->信息element section

这是我的代码:

在元素部分

在此处输入图像描述

在用户界面中:

在此处输入图像描述

突出显示的区域是添加离子列表但不显示任何内容的地方。

有什么帮助吗?

0 投票
1 回答
579 浏览

css - 如何使我的离子输入与我的 ion-item 宽度相等

我的ion-input元素有一条横跨视图整个宽度的灰线。我想要它,所以这条线等于ion-item元素。

宽度太宽。

在此处输入图像描述

0 投票
0 回答
42 浏览

html - 使用 –ion-item-background 时,项目无线电检查的奇怪和缓慢的行为 - 已解决

这是我想要实现的设计:

我使用下面的代码实现了这一点。它可以工作,但问题是检查元素的第一个 CSS 它具有淡入淡出效果,或者它比另一个慢,并且它有一个奇怪的行为 + 加上方形边框。

我的问题是,只有在添加 : .item-radio-checked { background-color: var(--ion-color-secondary); }AND&.item-radio-checked { --ion-item-background: var(--ion-color-secondary); --ion-item-color: var(--ion-color-light); }.question-option.

我上面提到的效果:首先,当我按下按钮一秒钟时,会出现阴影或者只是变慢,然后变成完全黑色:

这是我的 HTML

这是我的 CSS

0 投票
1 回答
72 浏览

angular - 单行 2 个离子项目,右侧第 3 个

我使用 ngFor 生成动态项目,我希望两个项目连续显示。但我只得到一个。如果我在 div 中使用两个 ion-items,它会加倍。两个离子项目,但加倍. 我需要顶部的第 1 项,第 1 项底部的第 2 项和第 1 项右侧的第 3 项和第 3 项底部的第 4 项。

我的代码

造型

我尝试将 ngif(i%2)==0 用于第二个离子项,反之亦然用于第一个离子项。即使我将所有项目都放在单行中。

使用 ngIf 编写代码

0 投票
1 回答
281 浏览

ios - Ionic 5 - ion-item 需要在 IOS 中点击 2 次才能触发 onclick 事件

下面的代码用于在点击 ion-item 时打开模式

只有当用户第二次点击 ion-item 时才会触发“selectDepartment”。尝试了许多解决方案但没有运气

离子信息

0 投票
1 回答
433 浏览

javascript - 单击按钮时打开所有 Ion Item Sliding

根据屏幕截图附件,当我触发 div 中的编辑按钮时,我希望所有滑动的离子项目一起打开,

目前它只滑出第一个删除离子项目,其他项目保持未打开状态。

这是我的代码

HTML

TS

我如何修改成为打开所有?

谢谢你。

截屏

在此处输入图像描述