ionic-framework 相关问题

Ionic是一个前端框架，用于使用Sass和Angular开发具有HTML的本机感混合移动应用程序。默认情况下，它运行在Cordova之上。

在我的离子角度应用程序中，我使用behaviorSubject来指示何时刷新一些数据。目前，订阅被放入第一个选项卡的 ionicViewEnter 中，如下所示：异步 ionViewDidEnter(){ ...

angular ionic-framework behaviorsubject

回答 1 投票 0

我已经看过很多答案，但没有一个对我有用。我有一个简单的 .html 文件，离子内容只是不滚动。我已经看过很多答案，但没有一个对我有用。我有一个简单的 .html 文件，离子内容只是不滚动。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet">  <script src="js/platformOverrides.js"></script> <script src="scripts/angular-resource.min.js"></script>  <script src="lib/ionic/js/ionic.bundle.js"></script>  <script src="cordova.js"></script> <script src="scripts/jquery.min.js"></script> <script src="scripts/angular-sanitize.min.js"></script> <script src="scripts/angular-ui-router.js"></script> <script src="scripts/angular-resource.js"></script> <script src="scripts/lodash.min.js"></script> <script src="js/app.js"></script> <script src="js/appController.js"></script> </head> <body ng-app="app" ng-controller="appController"> <ion-pane> <ion-header-bar class="bar-stable"> <h1 class="title">Ionic Blank Starter</h1> </ion-header-bar> <ion-view> <ion-content scroll="true"> <div class="scroll"> <a ng-repeat="item in items" class="item" href="#"> <h2>{{item.name}}</h2> </a> </div> </ion-content> </ion-view> </ion-pane> </body> </html> 上面，$scope.items 是从某个网络服务获取的。一切都渲染得很好，但它只是不滚动。如果重要的话，我正在使用 Visual studio 'Ionic Blank Template'。我已正确配置 Cordova，其余所有解决方案都可以正常工作。从 div 容器中删除 class="scroll"，从 scroll="true" 中删除 ion-content 并添加 overflow-scroll="true" 。所需的类将由 ionic 添加到元素上。您不需要明确添加它 <ion-view> <ion-content overflow-scroll="true"> <div class="list"> <a ng-repeat="item in items" class="item" href="#"> <h2>{{item.name}}</h2> </a> </div> </ion-content> </ion-view> 更新：Codepen 在 Chrome 模拟器中显示可滚动列表：http://codepen.io/addi90/full/RaOegM/ 在 ionic v1.3.3 或更高版本中，滚动不起作用。这可以通过放置溢出滚动=“假”来解决或定义为 <ion-content overflow-scroll="false"> 或 <ion-scroll scrollX="true" scrollY="true" style="margin:17rem; position:fixed; display:inline; top:0; right:0; bottom:0; left:0; white-space: nowrap;"> 会有帮助。 Sandy 要隐藏滚动条，请尝试将 ::-webkit-scrollbar {display:none;} 添加到您的 css 文件中。这对我有用。在你的父容器中使用高度：100dvh 等于 100% 和显示：flex 和弯曲方向：行/列；此后内部离子含量将完全滚动

angularjs cordova ionic-framework visual-studio-cordova

回答 4 投票 0

Ion-Searchbar 未在本机 Android 设备上显示

当我在浏览器上运行我的角度（离子）应用程序时，一切正常并且看起来很好（Angular v17.0.2、Ionic v8.2.2）。当我 npx cap 同步它并在带有 android studio 的设备上尝试它时，它看起来像......

angular ionic-framework searchbar

回答 1 投票 0

构建 iOS 应用程序时出现“断言失败：别名及其目标必须位于同一部分”错误的实际原因是什么？

我有一个使用 Ionic 创建的混合应用程序，最初在 Cordova 上运行，但一年前我们将其转移到 Capacitor，一切都按预期运行。最近在化妆的时候...

ionic-framework cordova-plugins capacitor xcode15 linker-flags

回答 1 投票 0

如何用离子换行？

我的代码正在处理多个离子项元素。当我运行代码时出现问题，离子项目标签导致卡片中的文本被截断并在 t...

javascript html ionic-framework

回答 4 投票 0

IonInput CSS 自定义属性不适用于帮助文本

我注意到 CSS 自定义属性不适用于辅助文本。我尝试更改辅助文本颜色，但没有任何反应。是否有解决方法或某种定义自定义的方法

css ionic-framework vuejs3 ionic7

回答 1 投票 0

离子电容器：错误：未在网络上实现

从cordova迁移到电容器后，在运行ionics时出现以下错误错误 vendor.js:114293 错误错误：未捕获（承诺中）：错误：未在网络上实现。错误：...

cordova ionic-framework capacitor

回答 2 投票 0

服务时的离子问题 => NullInjectorError：没有 TranslateService 的提供者

我创建了一个 Ionic 6 项目，它使用 @ngx-translate 模块作为依赖项。当我使用 ionic 服务时，我在 JS 控制台中收到一个空白页面和以下错误： core.mjs:6485 错误错误：Un...

javascript angular ionic-framework ngx-translate

回答 3 投票 0

在 Ionic 页面中将图像 src 的授权标头传递到远程服务器

我有一个 Ionic 应用程序，它从远程服务器获取数据并将其显示在 Ionic html 页面上。远程URL是这样的： http://foo.com/api/content/1 这会给我一个 JSON 对象“

angular cordova typescript ionic-framework

回答 4 投票 0

ionic 8 离子含量背景图像未正确显示离子页眉和离子页脚

我使用 ionic 8 和 angle 18，我希望页眉和页脚是透明的，并在全屏模式下显示离子内容背景图像，位于它们后面。我使用下面的代码：我使用 ionic 8 和 Angular 18，并且我希望页眉和页脚是透明的，并在全屏模式下显示离子内容背景图像，在它们后面。我使用以下代码： <ion-header [translucent]="true"> <ion-toolbar> <ion-title style="--opacity:1"> Main </ion-title> </ion-toolbar> </ion-header> <ion-content class="main ion-padding" [fullscreen]="true"> <p></p> </ion-content> <ion-footer [translucent]="true"> <ion-toolbar> <ion-item> <ion-img slot="end" id="logo" src="/assets/images/logo.svg"></ion-img> </ion-item> <ion-item> <ion-note slot="end" color="light"> title </ion-note> </ion-item> <ion-row class="ion-justify-content-center"> <ion-button style="--opacity:1">submit</ion-button> </ion-row> </ion-toolbar> </ion-footer> 在 SCSS 文件中： ion-content.main { --background: url('/assets/images/landing.png') center/cover; } #logo { width: 25%; } 但是，它没有正确显示： translucent属性仅在ios模式下有效。我建议添加一个 div 并将 ion-content、ion-header 和 ion-footer 包裹在 div 中，并将背景图像添加到 div 上，而不是添加到 ion-content 上。然后使用 css 将 ion-toolbar 和 ion-content 的背景设置为透明。 <div class="page"> <ion-header> <ion-toolbar> <ion-title style="--opacity:1"> Main </ion-title> </ion-toolbar> </ion-header> <ion-content class="main ion-padding" [fullscreen]="true"> <p></p> </ion-content> <ion-footer> <ion-toolbar> <ion-item> <ion-img slot="end" id="logo" src="/assets/images/logo.svg"></ion-img> </ion-item> <ion-item> <ion-note slot="end" color="light"> title </ion-note> </ion-item> <ion-row class="ion-justify-content-center"> <ion-button style="--opacity:1">submit</ion-button> </ion-row> </ion-toolbar> </ion-footer> </div> .page { background: url('https://picsum.photos/seed/picsum/200/300') center/cover; } .main, ion-toolbar { --background: transparent; }

angular ionic-framework

回答 1 投票 0

如何使用httpClient拦截器捕获成功的请求？

大多数 httpClient 拦截器教程都是捕获错误响应以显示警报。例子： https://ionicacademy.com/ionic-http-interceptor/ https://medium.com/@

angular http ionic-framework interceptor angular-http-interceptors

回答 4 投票 0

如何在我的 Ionic 应用程序角电容器中打开 PDF

我遇到了这个问题，我的目标是在我的离子应用程序角电容器中打开一个pdf，我收到的pdf是一串base64作为API的响应，我想打开这个pdf而无需从我...

angular pdf ionic-framework ionic4 ionic5

回答 1 投票 0

使用 ionic 中的输入类型=文件进行文件上传和拍照选项

我的应用程序中有一个文件输入（ionic 6 和 vue 3），当它在 iOS 中触发时，我得到这三个选项。我在这里发现一些搜索这些是操作系统默认值并且不能更改...

ionic-framework ionic6

回答 1 投票 0

Appium + Protractor + Android 设备错误超时

我陷入了一个错误，我不知道如何解决，问题来自这里： [调试] [MJSONWP] 使用参数调用 AppiumDriver.timeouts(): ["script",11000,"bb157408-9234-

android ionic-framework protractor appium

回答 2 投票 0

访问无扩展名的静态文件时阻止 Angular 运行

我有一个用于项目的 Ionic/Angular PWA，该项目还有一个适用于移动设备的本机 (Ionic Cordova) 应用程序。在应用程序上，我们需要接受与 PWA 具有相同 URL 的深层链接（以便您可以访问...

angular ionic-framework iis progressive-web-apps

回答 2 投票 0

如何一次展开或折叠离子手风琴组中的所有手风琴？

我希望这样的事情能够发挥作用：全部展开我希望这样的事情能够发挥作用： <button (click)="myAccordionGroup.expandAll()">Expand all</button> <ion-accordion-group #myAccordionGroup> <ion-accordion> <ion-item slot="header"> <ion-label>First Accordion</ion-label> </ion-item> <div slot="content">First accordion content</div> </ion-accordion> <ion-accordion> <ion-item slot="header"> <ion-label>Second Accordion</ion-label> </ion-item> <div slot="content">Second accordion content</div> </ion-accordion> </ion-accordion-group> 但是 IonAccordionGroup.expandAll 并不作为方法存在。事实上，在撰写本文时，IonAccordionGroup 并未公开任何方法。作为解决方法，我设法通过手动创建为每个 ion-accordion 分配值，然后将 ion-accordion-group 的值设置为包含所有这些值的数组来实现。为了一次折叠所有手风琴，我将 ion-accordion-group 的值设置为空数组。但我正在寻找一种方法：不会强迫我手动为每个 ion-accordion 元素分配值。不会强迫我管理组件中的 ion-accordion-group 状态。在撰写本文时，IonAccordionGroup 尚未提供可让您按照您所描述的方式进行操作的方法。您的“解决方法”是正确的方法。您可以创建自定义 Angular 指令来降低复杂性： import { ContentChildren, Directive, QueryList } from "@angular/core"; import { IonAccordion, IonAccordionGroup } from "@ionic/angular/standalone"; @Directive({ selector: "[appAccordionGroupToggle]", exportAs: "appAccordionGroupToggle", standalone: true, }) export class AccordionGroupToggleDirective { // get a reference to the ion-accordion instances inside @ContentChildren(IonAccordion) accordions!: QueryList<IonAccordion>; // get a reference to the ion-accordion-group instance constructor(private host: IonAccordionGroup) {} expand() { // setting the value of the ion-accordion-group to an array of all the // ion-accordion values will expand all ion-accordions this.host.value = this.accordions.map((accordion) => accordion.value); } collapse() { // setting the value of the ion-accordion-group to an empty array will // collapse all ion-accordions inside this.host.value = []; } } 在你的组件中，你可以像这样使用它： @Component({ ... standalone: true, imports: [ ... AccordionGroupToggleDirective, ], }) export class MyComponent { } <button (click)="toggler.expand()">Expand all</button> <button (click)="toggler.collapse()">Collapse all</button> <ion-accordion-group appAccordionGroupToggle #toggler="appAccordionGroupToggle"> <ion-accordion> <ion-item slot="header"> <ion-label>First Accordion</ion-label> </ion-item> <div slot="content">First accordion content</div> </ion-accordion> <ion-accordion> <ion-item slot="header"> <ion-label>Second Accordion</ion-label> </ion-item> <div slot="content">Second accordion content</div> </ion-accordion> </ion-accordion-group>

angular ionic-framework

回答 1 投票 0

index.js 依赖于“localforage”。 CommonJS 或 AMD 依赖项可能会导致优化救援

我收到此警告，但我不明白为什么“localforage”依赖于 CommonJS。我用谷歌搜索了几天，但找不到任何适合我的问题的解决方案。警告 C:\xxx ode_模块...

angular ionic-framework commonjs localforage ionic-storage

回答 1 投票 0

如何在 Ionic React 中每一帧执行代码？

首先，我对 Ionic、React 和 JSX 完全陌生，而且对 JS 总体来说也相当陌生。出于学习目的，我想玩一些“迷你实验闲置游戏”之类的东西。 ...

reactjs react-native ionic-framework

回答 2 投票 0

当我删除监听器时，removeListener 如何不起作用

我正在使用电容器视频播放器以下是我尝试删除监听器但在每次单击时多次删除函数调用的方法。 ... 方法：{ 异步seekVideo(seekTime){ 等待