标签: ionic-framework

嘿大家我一直遇到标题和侧面菜单上的滚动问题.

虽然我已经从这个片段中删除了它,但我尝试将class/attr has-header放在几乎所有可能的组合中:

<ion-side-menus>

  <ion-side-menu-content>

    <ion-header-bar class="bar-dark">
      <button class="button icon ion-arrow-left-a" ng-click='back()'></button>
      <h1 class="title">Ionic Shopping Checkout</h1>
      <button class='button icon ion-bag' ng-click='toggleRightSideMenu()'></button>
    </ion-header-bar>

    <ion-purchase></ion-purchase> // custom directive

    <ion-purchase-footer></ion-purchase-footer> // custom directive

  </ion-side-menu-content>

  <ion-side-menu side="right">
    <ion-cart has-header='true' ng-controller='CartController'></ion-cart> // custom directive
  </ion-side-menu>

</ion-side-menus>

此外,即使我将它们嵌套在离子滚动元素中,侧边菜单中的项目的ng-repeat也不会滚动.这可能是一个完全不相关的问题,但是我很好奇是否有人遇到过这个问题.

感谢您提前获得所有帮助!

我正在尝试使用相机.我搜索了一个例子或指南,但我找不到任何东西.

我想做的是只需按一下按钮打开相机,拍照,然后显示图像 - 全部使用离子和角度.

我正在构建一个离子应用程序,最近通过ng-class设置的动态类停止了任何效果.它仍然在HTML中正确解析,但选择器只是不起作用.

这是模板:

<ion-nav-bar class="bar-positive nav-title-slide-ios7" ng-class="{{ app.style }}">
        <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
</ion-nav-bar>

这是最终的HTML,据我所知,这完全没问题:

<ion-nav-bar class="bar-positive nav-title-slide-ios7 bar bar-header nav-bar disable-user-behavior  no-animation" ng-class="Tallin">
  <ion-nav-back-button class="button-clear button back-button ng-hide"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
  <div class="buttons left-buttons"> <span class="">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </span></div>
  <h1 ng-bind-html="title" class="title ng-binding" style="left: 51px; right: 51px;">Home</h1>
  <div class="buttons right-buttons"> </div>
</ion-nav-bar>

但是,如果我现在尝试在任何CSS选择器中使用.Tallin,它们都没有效果.我尝试将它用作常规静态类,只是为了验证选择器,它们可以工作.

这直到最近才出现问题,但我不确定哪个更改开始了.任何想法将不胜感激.

我想在问卷的各个部分之间横向滑动.每个部分都有一个标题和一些已回答的问题.我想在问题上添加一个垂直滚动,但无法弄清楚如何让它工作.这是我的观点:

  <ion-view title="{{vm.title}}">
    <ion-slide-box show-pager="true" class="has-header">
        <ion-slide ng-repeat="s in vm.sections">
            <ion-item class="item-royal">
                {{s.Heading}}
            </ion-item>
            <ion-scroll>
                <div class="card" ng-repeat="q in s.Questions">
                    <div class="item item-divider">
                        {{q.Text}}
                    </div>
                    <div class="item">
                        {{q.Answer}}
                    </div>
                </div>
            </ion-scroll>
        </ion-slide>
    </ion-slide-box>
</ion-view>

试图让离子启动并运行但是会遇到很多错误.有小费吗？

Nates-MacBook-Pro:~ TheRainmaker$ npm install -g cordova ionic
npm ERR! Error: EACCES, mkdir '/usr/local/lib/node_modules/cordova'
npm ERR!  { [Error: EACCES, mkdir '/usr/local/lib/node_modules/cordova']
npm ERR!   errno: 3,
npm ERR!   code: 'EACCES',
npm ERR!   path: '/usr/local/lib/node_modules/cordova',
npm ERR!   fstream_type: 'Directory',
npm ERR!   fstream_path: '/usr/local/lib/node_modules/cordova',
npm ERR!   fstream_class: 'DirWriter',
npm ERR!   fstream_stack: 
npm ERR!    [ '/usr/local/lib/node_modules/npm/node_modules/fstream/lib/dir-writer.js:36:23',
npm ERR!      '/usr/local/lib/node_modules/npm/node_modules/mkdirp/index.js:46:53',
npm ERR!      'Object.oncomplete (fs.js:107:15)' ] }
npm ERR! 
npm ERR! Please try running this command again as root/Administrator.

npm ERR! System Darwin 14.0.0
npm ERR! …

为了修复应用程序在缺口下的问题，我尝试了几种方法，但无济于事

• 将以下内容添加到index.html

<meta name="viewport"
  content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

• 添加以下 CSS

@supports (padding: max(16px)) {
  body {
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
                env(safe-area-inset-bottom) env(safe-area-inset-left);
        }
    }

使用此服务但返回未定义的数据。

  // Function for get a element to the store
  public async get(name: string): Promise<any> {
    await this._storage?.get(name);
  }

我是 ionic 新手，正在设计一个登录页面。但是我注意到，当我将应用程序部署到 ios 设备时，当单击/按下输入字段时，本机 ios 键盘会将内容向上推。

我一直在试图找出如何解决这个问题，但我没有运气。我目前正在使用最新的离子框架。

有没有办法确保内容不被推送？

这是我的登录 html：

<ion-content class="background" [fullscreen]="true" slot="fixed">
  <h1 class="login-title-text">ign you in</h1>
  <p class="login-subtitle-text">Welcome back!</p>

  <div class="inputs">
    <ion-input class="item-input" type="email" placeholder="Email"></ion-input>
    <ion-input class="item-input" type="password" placeholder="Password"></ion-input>
  </div>
</ion-content>

<ion-footer>
  <ion-button color="dark" expand="block">Login</ion-button>
  <ion-button color="dark" expand="block">Forgot Password</ion-button>
  <ion-button color="dark" expand="block">Register</ion-button>
</ion-footer>

这是我的 scss：

ion-content {
    --keyboard-offset: 0px;
  }
  
.background {
    --background: url("/assets/img/background.jpg") no-repeat fixed center;
}

.login-title-text {
    font-weight: bold;
    font-size: 28px;
    padding: 50px 0 20px 30px;
}

.login-subtitle-text {
    font-size: 18px;
    padding: 10px 0 …

我将 Ionic 6 与 Angular 结合使用。我想要一个用于秒表功能的时间选择器按钮。由于我只需要时间，不需要日期，因此我的 HTML 中有以下内容：

<ion-content [fullscreen]="true">
  <ion-list>
    <ion-item>
      <ion-label>Start Time</ion-label>
      <ion-datetime display-format="h:mm A" picker-format="h:mm A" value="1990-02-19T07:43Z"></ion-datetime>
    </ion-item>
  </ion-list>
</ion-content>

我只是从https://github.com/ionic-team/ionic-docs/blob/v4/src/demos/api/datetime/index.html的官方 ionic 示例中复制粘贴了此片段

上面的代码在该示例中运行良好，该示例基于纯 HTML/JS，使用 @ionic/core@4.7.4/ 但是当我将其插入我的 Ionic6/Angular 代码时，它总是显示带有庞大日历的日期选择器。我不需要日历，也没有屏幕空间。将时间格式更改为类似的格式hh/mm也没有任何效果。

如何让 Ionic 识别我想要的显示格式/选择器格式？

我需要在用户第一次访问该页面时向他显示欢迎模式。

这段代码工作正常：

if(this.app_data) {
  if(this.app_data['company']){
    if(this.app_data['company']['welcomed'] === false){
      this.openWelcomeModal();
    }
  }
}

问题是检查嵌套变量结构的混乱代码。

明确的方法是使用一行，如下所示：

if(this.app_data['company']['welcomed'] === false){
  this.openWelcomeModal();
}

但这会产生错误：

if(this.app_data) {
  if(this.app_data['company']){
    if(this.app_data['company']['welcomed'] === false){
      this.openWelcomeModal();
    }
  }
}

Run Code Online (Sandbox Code Playgroud)

有没有办法在一行中完成它，而不需要检查嵌套对象的每一层？