ionic3 相关问题

“离子按钮+仅图标”组件内部不起作用

我正在使用 Ionic 3.*，试图创建一个仅包含一个按钮的组件。 组件代码为： @成分（{ 选择器：“个人资料按钮”， templateUrl: 'profile-button.html', }) 出口类

this.platform.is("mobile") 对于浏览器返回 true

我正在浏览器上运行一个离子项目 脚本 “浏览器”：“ionic-app-scripts服务--sourceMap源映射--iscordovaserve--wwwDir平台/浏览器/www/--buildDir平台/浏览器/www/build” ...

如何在点击按钮后动态调整传单地图的大小？

我有一份传单地图包含在 此页面分为 我有一份传单地图包含在<div id="map" data-tap-disabled="false" style="width: 100%; height: 100%;"></div> 此页面分为<ion-header>、<ion-content>和<ion-footer>。该地图包含在 <ion-content> 中。我想做的是用按钮隐藏页眉和页脚。 所以我用 L.easyButton 创建了一个按钮。代码如下： L.easyButton('click',function(){ if(self.hideLayout){ self.map.addControl(setLayers); self.map.addControl(setZoom); self.map.addControl(toolBar); self.map.addControl(setScale); self.enableAdditionalButtons(textButton, arrowButton); self.hideLayout = false; self.hideFooter = false; self.map.invalidateSize(true); }else{ self.map.removeControl(toolBar); self.map.removeControl(setLayers); self.map.removeControl(setZoom); self.map.removeControl(setScale); self.disableAdditionalButtons(textButton, arrowButton); self.hideLayout = true; self.hideFooter = true; self.map.invalidateSize(true); } 我将以下代码添加到<ion-footer>中： <ion-footer *ngIf="!this.mapService.hideFooter"> 发生的情况是地图不会调整大小，并且仍然是白色带而不是页脚 我尝试使用invalidateSize传单方法，即使使用“setInterval”但没有成功。我认为有关 html 和 css 的内容需要编辑，但我还不是专家。 再次感谢大家，我希望我说清楚了:) 根据您的代码，我将添加我的积分； constructor(private plt: Platform) { } L.easyButton('click', () => { const map = document.getElementById('map'); if (self.hideLayout) { self.map.addControl(setLayers); self.map.addControl(setZoom); self.map.addControl(toolBar); self.map.addControl(setScale); self.enableAdditionalButtons(textButton, arrowButton); self.hideLayout = false; self.hideFooter = false; self.map.invalidateSize(true); map.style.height = '100%'; map.style.width = '100%'; } else { self.map.removeControl(toolBar); self.map.removeControl(setLayers); self.map.removeControl(setZoom); self.map.removeControl(setScale); self.disableAdditionalButtons(textButton, arrowButton); self.hideLayout = true; self.hideFooter = true; self.map.invalidateSize(true); map.style.height = (this.plt.height() - 26) + 'px'; // 26 is the status bar, it may be 20 so u update it accordingly // source: https://ionicframework.com/docs/v3/theming/overriding-ionic-variables/ map.style.width = this.plt.width() + 'px'; } 如果它不起作用，那么您需要提供您的 ts 代码，因为（自己）不太清楚它是像（这个）还是您只是共享部分功能... 最后我找到了一个适合我的解决方案。我会把它发布在这里。我要感谢@Mostafa Harb 帮助我。 L.easyButton('click', function() { const footerAndHeader = Array.from(document.getElementsByClassName('scroll-content') as HTMLCollectionOf<HTMLElement>)[1]; if (self.hideLayout) { self.map.addControl(setLayers); self.map.addControl(setZoom); self.map.addControl(toolBar); self.map.addControl(setScale); self.enableAdditionalButtons(textButton, arrowButton); self.hideLayout = false; self.hideFooter = false; self.hideHeader = false; self.map.invalidateSize(true); footerAndHeader.style.marginBottom = "40px"; footerAndHeader.style.marginTop = "54px"; } else { self.hideLayout = true; self.hideFooter = true; self.hideHeader = true; self.map.removeControl(toolBar); self.map.removeControl(setLayers); self.map.removeControl(setZoom); self.map.removeControl(setScale); self.disableAdditionalButtons(textButton, arrowButton); self.map.invalidateSize(true); footerAndHeader.style.marginBottom = "7px"; footerAndHeader.style.marginTop = "3px"; } }) 在我的例子中，问题是带有“scroll-content”类的<div>，该类是在<ion-content>标签内自动创建的。因此，使用 getElementsByClassName，我获取了数组中的第二个元素，并调整了页眉和页脚的上边距和下边距。 这个解决方案肯定不是最优的，会有更好的方法。 CSS .mymap{ display: flex; width: 100%; height: 100%; } HTML <div id="map" data-tap-disabled="false" class="mymap"> // your code </div> 添加 display: flex 并设置 height 和 width

指定 max 和 min 时值发生变化的离子日期时间问题

我在我的项目中使用ion-datetime，以下是有关Ionic版本的一些信息： 离子： 离子 CLI：5.4.16 离子框架：离子角3.9.5 @ionic/app-scripts：3.2.2 而他...

离子发球 VS 离子发球 -c

我是 Ionic 新手，正在使用 Ionic 3.9.2 我有几个终端命令来为我的离子应用程序提供服务，但是，我没有发现这两个命令之间有任何区别。 离子服务 和 离子服务-c

npm i 运行命令 - 失败！ （退出代码 254）

离子：3.20.0 节点：v8.10.0 npm：5.6.0 尼普我 ✖ 运行命令 - 失败！ [错误] 运行 npm i 时发生错误（退出代码 254）： npm 错误！小路 /用户/卢卡斯齐默曼/

如何删除输入类型中的默认颜色？

我已经创建了输入类型并创建了该框的边框，但是当我单击该按钮时，它显示默认颜色，但我不应该显示默认颜色 贝洛...

Ionic 3 Cordova ajax 调用在 Windows 10 (UWP) 上失败

我无法让我的 ajax 调用在为 Windows 10 UWP 构建的 Ionic 3 Cordova 应用程序上运行。他们可以访问本地主机，但不能访问任何外部连接。 该应用程序在两者上都运行良好

无法从离子输入中选择或复制文本

我正在使用 ionic3 开发一个应用程序，但是在 Android 上使用它时，我无法选择 、、 或 标签内的文本。 在 </desc> 中测试时 <question vote="6"> <p>我正在使用 ionic3 开发一个应用程序，但是在 Android 上使用它时，我无法选择 <pre><code><ion-input></code></pre>、<pre><code><input></code></pre>、<pre><code><ion-textarea></code></pre> 或 <pre><code><textarea></code></pre> 标签内的文本。<br/> 在浏览器中测试时，效果很好。然而，当我在android中使用它时，点击输入，长或短只会切换键盘，并且不可能选择文本。</p> <p>经过深入研究，我意识到如果我的<pre><code><ion-input></code></pre>或<pre><code><ion-textarea></code></pre>位于<pre><code><ion-item></code></pre>中，它就可以正常工作，并且可以选择和复制文本。 由于许多设计原因，我不想将输入放入 <pre><code><ion-item></code></pre> 元素中，因为它会在应用程序中产生许多其他问题。</p> <p>我认为 <pre><code><ion-item></code></pre> 元素必须修改子元素的行为，例如允许复制默认情况下其他元素不允许的文本。 所以我想知道是否可以重现这种行为，而不必将输入包装在 <pre><code><ion-item></code></pre> 元素中。</p> <p>我尝试在我的 scss 文件中使用它，但没有成功：</p> <pre><code>ion-input input, ion-textarea textarea, input, textarea { -webkit-user-select: auto; // I also tried -webkit-user-select: text; } </code></pre> <p>如果我喜欢这样：</p> <pre><code>ion-input, ion-textarea { -webkit-user-select: auto; // I also tried -webkit-user-select: text; } </code></pre> <p>我可以选择文本，但不能在输入时选择，我正在选择输入本身。</p> <p>我想要的只是能够在输入、复制、粘贴时进行选择...</p> <p>任何想法将不胜感激:)</p> </question> <answer tick="false" vote="0"> <p>我已经将它与 ion-textarea 和 Ionic 7/Angular 一起使用，如下所示：</p> <pre><code> <ion-item> <ion-textarea class="font-size-12 color-white opacity-1" disabled="true" rows="13" [value]="event?.payment?.payDetails" ></ion-textarea> </ion-item> </code></pre> <p><em><strong>参考：</strong></em><a href="https://github.com/ionic-team/ionic-framework/issues/11438#issuecomment-298231771" rel="nofollow noreferrer">https://github.com/ionic-team/ionic-framework/issues/11438#issuecomment-298231771</a></p> </answer> </body></html>

API 错误：<_UIKBCompatInputView: 0x13fd1d7c0; frame = (0 0; 0 0); layer = <CALayer: 0x1c4426e40>> 返回 0 宽度，假设 UIViewNoIntrinsicMetric

我在装有 iOS 11 的 iPhone 7 plus 上使用 Ionic 3。当我运行我的应用程序时， 并填写一些文本/输入字段（基本表单），应用程序会冻结 几秒钟后变得完全没有反应（这不是......

如何将离子头像放置在离子项目的左上角？

我有一个离子项目，带有离子头像和带有大文本的离子标签。 为了在 ion-label 中显示全文，我向 ion-label 添加了一个类“ion-text-nowrap”。 效果很好。 但问题是离子化身

缺少表单参数：grant_type IONIC CAPACITOR

我正在尝试调用Keycloak，但控制台给了我这个错误： 缺少表单参数：GRANT_TYPE 这是我的代码： 邮政（） { 调试器; 让 url = "http://172.20.10.3:8080/realms/myre...

启动Gradle Daemon，2个繁忙的Daemon无法重用，使用--status查看详情

我有两个使用 Ionic 3 和 4 的项目，每当我运行 ionic cordova run android 时，它总是卡在启动 Gradle 守护进程，3 个繁忙的守护进程无法重用，请使用 --status 了解详细信息。 当

离子存储角度错误：无法解析存储角度/fesm中的“@angular/common”

我正在尝试在我的离子应用程序中使用离子/存储角度。我正在关注文档：https://github.com/ionic-team/ionic-storage。 我安装了存储角度（npm install @ionic/stor...

如何在 IONIC 3 中的 ion-item 部分显示两个 ion-col 字段

我需要在一行中显示两个输入字段，如下所示： 但是当我使用时： 电话号码 我需要在row内显示两个输入字段，如下所示： 但是当我使用时： <ion-list> <ion-item> <ion-label stacked> Phone Number</ion-label> <ion-grid> <ion-row> <ion-col> <ion-input type="tel" placeholder="Area code"></ion-input> </ion-col> <ion-col> <ion-input type="tel" placeholder="Number"></ion-input> </ion-col> </ion-row> </ion-grid> </ion-item> 但它没有显示任何屏幕： 请帮助我。 请尝试在 ion-item 之前添加 ion-row。我希望这可以帮助你。谢谢 <ion-list> <ion-label stacked> Phone Number</ion-label> <ion-row> <ion-item col-6> <ion-input type="tel" placeholder="Area code"></ion-input> </ion-item> <ion-item col-6> <ion-input type="tel" placeholder="Number"></ion-input> </ion-item> </ion-row> </ion-list> 您只需使用<ion-grid>，如下所示。 这正在工作stackblitz <ion-content> <ion-grid> <ion-row> <ion-col col-4> <ion-label stacked> Phone Number</ion-label> </ion-col> <ion-col col-4> <ion-input type="tel" placeholder="Area code"></ion-input> </ion-col> <ion-col col-4> <ion-input type="tel" placeholder="Number"></ion-input> </ion-col> </ion-row> </ion-grid> </ion-content> 就个人而言，我不建议在列表中的每个项目中创建网格......处理起来可能非常繁重。 但是看看你的代码，我发现你只想将行分成两部分，这样每个输入都会彼此相邻.. 所以这对我来说很有效（https://ionic-list-items-with-two-inputs-in-row.stackblitz.io/） <ion-content padding> <ion-list> <ion-label stacked> Phone Number</ion-label> <ion-item> <ion-input type="tel" placeholder="Area code"></ion-input> <ion-input type="tel" placeholder="Number"></ion-input> </ion-item> </ion-list> </ion-content> 在<ion-grid>之前添加<ion-row>，如下所示，它在离子项内对我有用。 <ion-item> <ion-grid> <ion-row> <ion-col>Lorem ipsum 1</ion-col> <ion-col size="shrink">lorem ipsum 2</ion-col> </ion-row> </ion-grid> </ion-item>

Ionic 3 组件与页面

你能告诉我 Ionic 3 应用程序中的组件和页面生成器有什么区别吗？看来我也可以在组件内部使用像 ionViewWillLeave 这样的页面生命周期钩子。所以什么时候应该...

离子菜单不起作用离子侧菜单未显示

我正在尝试在离子应用程序中添加侧面菜单，但它没有出现，我正在附加所有文件，请帮助我！ 应用程序.html 文件 ...

Firebase 托管 - 清除缓存

按照Firebase教程实现Firebase托管。在控制台中托管应用程序。但问题是当我更改 html 模板并通过运行在 Firebase 控制台中重新部署时 离子构建...

“Window”类型上不存在属性“cordova”。 ：离子

在我的代码中，我收到错误，因为类型“Window”上不存在属性“cordova”。 这就是我收到错误的地方 var browserRef = window.cordova.InAppBrowser.open() 我也安装了...

Ionic + Cordova Android 构建错误 - 找不到tools.jar

今天我已将 MacBook 升级到 macOS Big Sur 版本 11.0.1。现在，当我尝试为 Android 构建项目时出现了问题。 任务 ':CordovaLib: