ionic-framework 相关问题

我是 Ionic 移动应用程序的新手，并且使用最新版本的 Angular 和 Ionic（分别为 17.0.5 和 7.1.5）。为了导航，我添加了 3 个按钮（上一个、主页和下一个按钮），如下所示：我是 Ionic 移动应用程序的新手，并且使用最新版本的 Angular 和 Ionic（分别为 17.0.5 和 7.1.5）。为了导航，我添加了 3 个按钮（上一个、主页和下一个按钮），如下所示： <ion-footer> <ion-toolbar> <ion-buttons slot="start" *ngIf="showPreviousButton()"> <ion-button [routerLink]="['/previous']"> <ion-icon name="arrow-back"></ion-icon> </ion-button> </ion-buttons> <ion-buttons slot="center"> <ion-button [routerLink]="['/main']"> <ion-icon name="home"></ion-icon> </ion-button> </ion-buttons> <ion-buttons slot="end" *ngIf="showNextButton()"> <ion-button [routerLink]="['/next']"> <ion-icon name="arrow-forward"></ion-icon> </ion-button> </ion-buttons> </ion-toolbar> </ion-footer> 在app.component.html中。 “上一个”按钮和“下一个”按钮以及我在“app.component.ts”文件中使用各自方法检查的条件是可见的，但插槽“中心”中的主页按钮不可见。我尝试了很多方法，例如单独保留主页按钮等，但主页按钮仍然不可见。它具有所有功能，但“上一个”和“下一个”按钮仍然不可见。无法理解这个问题的原因。有人可以提供一些见解来解决这个问题吗？开发控制台中没有需要修复的错误消息。我只保留主页按钮，删除其他按钮。将主页按钮移至其他页面，移动整个导航栏等。仍然重复相同的问题。 ion-buttons 没有 slot="center" 属性。这可能就是它没有出现的原因。您需要自己将按钮居中。简单的方法是使用 ion-text-center 类。或者你可以使用flexbox等。 <ion-footer> <ion-toolbar> <ion-buttons slot="start"> <ion-button> <ion-icon name="arrow-back"></ion-icon> </ion-button> </ion-buttons> <div class="ion-text-center"> <ion-button> <ion-icon name="home"></ion-icon> </ion-button> </div> <ion-buttons slot="end"> <ion-button> <ion-icon name="arrow-forward"></ion-icon> </ion-button> </ion-buttons> </ion-toolbar> </ion-footer> 有关按钮放置的更多信息

angular typescript ionic-framework navigation home-button

回答 1 投票 0

离子路由器 - 非线性路由

我正在为 Android 编写 Vue3 + Ionic 应用程序，并且我有一些选项卡。我想为每个选项卡维护不同的导航堆栈，因此当用户单击某些视图上的后退按钮时，他们将始终停留在...

ionic-framework vue-router

回答 1 投票 0

如何配置我的 Ionic 面包屑以仅在单击时更改 URL 的哈希值？

我正在使用 Ionic 7 和 React 18。我已经构建了这些 Ionic 面包屑...... 发件人我正在使用 Ionic 7 和 React 18。我已经构建了这些 Ionic 面包屑...... <IonBreadcrumbs> <IonBreadcrumb {...(isSenderCompleted() ? { href: '#sender' } : {})}>Sender</IonBreadcrumb> ... </IonBreadcrumbs> 其目的是，如果有人单击其中一个面包屑，则只有 URL 的哈希部分发生变化。然而，上面的代码并没有实现这一点——它似乎将哈希解释为完整的 URL。您可以使用 Ionic React 中的 ion-router-link 组件。 import { IonBreadcrumbs, IonBreadcrumb } from '@ionic/react'; import { IonRouterLink } from '@ionic/react-router'; const App = () => { const isSenderCompleted = () => { return true; // Replace with your logic }; return ( <IonBreadcrumbs> <IonBreadcrumb> {isSenderCompleted() ? ( <IonRouterLink href="#sender">Sender</IonRouterLink> ) : ( <span>Sender</span> )} </IonBreadcrumb> </IonBreadcrumbs> ); }; export default App;

reactjs ionic-framework hash breadcrumbs

回答 1 投票 0

如何允许通过在键盘上键入字母来触发 IonSelect 中的选项选择？

我正在使用 Ionic 7 和 React 18。我有这个 IonSelect 组件用于从按字母顺序排列的列表中选择状态我正在使用 Ionic 7 和 React 18。我有这个 IonSelect 组件用于从按字母顺序排列的列表中选择状态 <IonSelect interface='popover' aria-label='State' value={contactInfo?.mailingAddress.region?.id} placeholder='Select State' onIonChange={(e) => setContactInfo((prevInfo) => { const selectedRegionId = e.detail.value return { ...prevInfo, mailingAddress: { ...prevInfo.mailingAddress, region: regions.find((region) => region.id === selectedRegionId) || null } } }) } > {regions.map((stateOption) => ( <IonSelectOption key={stateOption.id} value={stateOption.id}> {stateOption.name} </IonSelectOption> ))} </IonSelect> 我希望它的行为类似于 HTML 选择菜单，当您键入一个字母时，列表会滚动到以该字母开头的选项。我该如何调整我必须适应的情况？请遵循此示例。您可以使用它作为满足您要求的基本代码。这个想法是当你渲染选择时为每个选项添加一个标识符。当选择弹出窗口打开时，通过钩子添加按键事件监听器。捕获key-down事件按键，通过标识符找到select选项。滚动到该项目。 import React, { useEffect, useState } from "react"; import { IonItem, IonList, IonSelect, IonSelectOption } from "@ionic/react"; function Example() { const [st, setSt] = useState(""); const [items, setItems] = useState([ "Abc", "Bcd", "Def", "Ghijk", "HIdada", "ppp", "zrrr", "xrrr", "crrr", "vrrr", "brrr", "nrrr", "mrrr", "arrr", "srrr", "drrr", "frrr", "gqqq", "zxs", "qwe", "ert", "trg", ]); useEffect(() => { let content = document.getElementsByClassName("alert-radio-group"); const handleKeyDown = (e) => { const key = e.key; var filteredItems = items.filter((item) => item.toLocaleLowerCase().startsWith(e.key) ); console.log(filteredItems); if (filteredItems && filteredItems.length > 0) { var filteredItem = filteredItems[0]; let elements = document?.getElementsByClassName( filteredItem.toLocaleLowerCase() ); console.log(elements); const y = document?.getElementById(elements[1].id)?.offsetTop; console.log(y); y && content[0]?.scrollTo(0, y); } console.log(e.key); }; document.addEventListener("keydown", handleKeyDown, true); return () => { document.removeEventListener("keydown", handleKeyDown); }; }, [st]); return ( <IonList> <IonItem> <IonSelect className="wrapper" aria-label="Fruit" placeholder="Select fruit" onIonChange={() => { setSt("X"); }} onIonCancel={() => { setSt("X"); }} onIonDismiss={() => { setSt("X"); }} onClick={() => { setSt("L"); }} > {items.map((item) => ( <IonSelectOption key={item} value={item} className={item.toLocaleLowerCase()} > {item} </IonSelectOption> ))} </IonSelect> </IonItem> </IonList> ); } export default Example;

reactjs ionic-framework keyboard ion-select

回答 1 投票 0

使用 CameraSource.Photos 离子电容器在 Android 手机中打开图库

以下代码在网络浏览器（pwa）中打开图库并且工作正常，但在 Android 设备上运行相同的代码时，它不会打开图片库。如果我丢失了某些内容，请告诉我。导入 {C...

ionic-framework plugins camera gallery capacitor

回答 2 投票 0

cordova-plugin-ionic-webview - 尽管具有自动完成属性，但无法以 HTML 形式保存密码

我正在开发 Cordova（~PhoneGap、~Ionic）应用程序，我遵循 Apple 指南，并将自动完成属性添加到我的 HTML 登录表单中，以询问用户是否要保存其凭据...

cordova ionic-framework phonegap-plugins ionic-webview cordova-plugin-ionic-webview

回答 2 投票 0

被 CORS 策略阻止 - 通配符“*”且 withCredentials 为 true

我收到以下 CORS 错误：从“https://my.domain/api/chat/info?t=1701325904808”访问 XMLHttpRequest 来源“http://localhost:8100”已被 CORS 策略阻止：该值...

angular ionic-framework cors stomp sockjs

回答 1 投票 0

创建包含密码的共享链接

我正在使用 Ionic 和 Java+Spring 创建这个测验应用程序现在我需要创建一种可以与其他人共享的链接，以便他们可以访问我创建的特定测验。进入ins...

java angular typescript spring ionic-framework

回答 1 投票 0

如何防止 Ionic/React fab 按钮随键盘移动？

我的 App.tsx 文件中有一个 fab 按钮。它覆盖在我的底部选项卡栏的顶部，但实际上不在选项卡栏内部，因为如果我将其放入 IonTab 中，非选项卡按钮似乎会消失。目前，...

reactjs ionic-framework ionic4 floating-action-button

回答 2 投票 0

[Cordova][Android] 在发布版本上运行时套接字未连接

我目前正在尝试在 Google Play 商店上发布 Cordova 应用程序... 但是，当我从商店运行发布版本时，应用程序不会连接到套接字。我正在使用 LaravelEcho 和 Soc...

android angular cordova sockets ionic-framework

回答 2 投票 0

ionic-framework 相关问题

最新问题