标签: ionic2

如何更改Ionic 2中导航栏的背景颜色?

我正在尝试改变Ionic 2中的导航栏背景颜色.我尝试了很多东西,比如class ="bar bar-stable"等

现在我的代码看起来像这样:

<ion-navbar  *navbar> 
Run Code Online (Sandbox Code Playgroud)

所以背景当前是灰色的(默认)

mobile cordova ionic-framework ionic ionic2

9
推荐指数
3
解决办法
1万
查看次数

Angular 2 - 如何访问指令并在其中调用成员函数

我有这样的指示 -

@Directive({
    selector:   'someDirective'
})
export class  SomeDirective{         
    constructor() {}    
    render = function() {}
}
Run Code Online (Sandbox Code Playgroud)

然后我导入指令

import {SomeDirective} from '../../someDirective';
@Page({
    templateUrl: '....tem.html',
    directives: [SomeDirective]
})
export class SomeComponent {
      constructor(){}
      ngAfterViewInit(){//want to call the render function in the directive
}
Run Code Online (Sandbox Code Playgroud)

在ngAfterViewInit中,我想在指令中调用render函数.这该怎么做 ?

ionic2 angular

9
推荐指数
1
解决办法
2万
查看次数

如何在Ionic 2中的选择组件内使用图像

我正在尝试将图像放入SelectIonic 2中的组件中:我已将图像源文件放在www/imgIonic 2项目的文件夹中.但是,使用简单的img-tag不会使用此代码显示任何图像:

<ion-list>
  <ion-item>
    <ion-label>Gaming</ion-label>
    <ion-select [(ngModel)]="gaming">
      <ion-option value="nes">
        NES
        <img src="img/myImage.png">
      </ion-option>
    </ion-select>
  </ion-item>
</ion-list>
Run Code Online (Sandbox Code Playgroud)

有谁有想法吗?

ionic2 ionic2-select

9
推荐指数
1
解决办法
4351
查看次数

可以使用Ionic 2更改手机和平板电脑的布局吗?

我看到Ionic 2有一个响应式网格系统,但这似乎只是让你创建一个网格样式布局.

我正在寻找能让我在平板电脑上以一种方式显示视图而在手机上以另一种方式显示视图的内容.在这个特定的例子中,我有一份工作清单.如果它是平板电脑,我还想在列表右侧显示一张地图并将其绘制出来.如何制作我理解的地图,但我如何告诉他们使用的是什么并显示正确的用户界面?

typescript ionic-framework ionic2 ionic3 angular

9
推荐指数
1
解决办法
6041
查看次数

离子问题没有'Access-Control-Allow-Origin'

我正在研究离子应用程序.我的问题是:当我尝试从服务器获取数据时我得到了这个:

XMLHttpRequest无法加载https://mywebsite.com/api.请求的资源上不存在"Access-Control-Allow-Origin"标头.原产地" :HTTP //本地主机,因此"是不允许访问.

我已经尝试将其添加到.htaccess:Header set Access-Control-Allow-Origin:*

这到我的api页面(PHP):header('Access-Control-Allow-Origin:*');

但仍然没有工作

$ http.get(url).success(function(response){...}

ionic-framework ionic2

9
推荐指数
2
解决办法
4万
查看次数

如何在ionic 2中包含node_modules的javascript + css?

我需要在我的离子2应用程序中包含fullcalendar和chart.js.(离子2 RC.3)我用npm来安装相关模块,脚本在我的node_modules文件夹中.
如何正确地将node_modules文件夹中的scripts/css包含到我的应用程序中?

我试过的事情:

  • 手动将相关的js/css文件复制到www文件夹中,并使用index.html中的normal <script>和<link>elements 引用它们.(我主要是这个工作,但看起来非常笨重)
  • 在我的app.module.ts和/或我的自定义component.ts文件中导入它们import 'chart.js/dist/Chart.bundle.min.js'; (例如 (这种工作,但我得到的错误,底层脚本找不到jQuery,所以我仍然需要在jQuery中包含jQuery) index.html手动如上)

当然有更好的方法吗?

ionic2

9
推荐指数
1
解决办法
5496
查看次数

离子2滚动性能问题

关于ionic2和Angular2的博客和评论给我留下了深刻的印象,我开始在离子2中编写一个应用程序,并发现ionic2滚动性能不适合iOS和Android的大量记录.

  1. 我在大多数列表项中的图像之间有一个很大的项目列表
  2. 滚动性能适用于10到20个项目,但它涉及30多个项目时非常慢
  3. 经过大量搜索后发现虚拟滚动离子并使用它然后性能略有改善,最多50项,但在65项以上后再次减速

我在iOS中尝试过WKWebview,在性能方面有一些改进,但是对于大型列表,屏幕常常变为黑色,所以我放弃了这个想法.由于应用程序的大小增加,我不想使用人行横道,所以从未尝试过.

任何人都可以帮助建议任何解决方法来解决此问题或任何纯JavaScript框架解决方案,以显示没有任何问题的大型列表?适用于Android和ios.

javascript performance android ios ionic2

9
推荐指数
1
解决办法
800
查看次数

Ionic 2 - Slider - 显示第二张幻灯片项目的一部分

我想展示第二个幻灯片项目的一部分,但不知道该怎么做.这是我到目前为止(基本的离子幻灯片):

<ion-slides pager >
            <ion-slide>
              <h2>Slide 1</h2>
            </ion-slide>

            <ion-slide>
              <h2>Slide 2</h2>
            </ion-slide>

            <ion-slide>
              <h2>Slide 3</h2>
            </ion-slide>
</ion-slides>
Run Code Online (Sandbox Code Playgroud)

这就是我想要的方式: 在此输入图像描述

我试图将离子滑片的宽度改为小于100%,但是第二张和第三张幻灯片只是从屏幕左侧进一步向左移动.

谁能帮我 ?

ionic-framework ionic2 ion-slide-box angular

9
推荐指数
2
解决办法
7797
查看次数

计算传单中两点之间的距离

如何计算Leaflet-ionic2中两个标记之间的距离?

不知道,我希望有一个Algorithme可以在我选择一个标记时立即执行,它会向我显示我的位置和标记之间的距离。

谢谢..

geolocation leaflet ionic2

9
推荐指数
2
解决办法
1万
查看次数

离子段仅在单击内容输入后更改

我正在使用ionicv2和Adobe Creative SDK构建照片编辑应用程序.我已经成功实施了创意SDK.

在CSDK成功返回已编辑文件的URL后,我将包含段的页面与文件URL一起推送.

问题出在第二页,当我点击该段时,它不会切换.只有在我点击页面内的输入时才会切换.

我尝试在没有CSDK的情况下进行操作,它运行没有任何问题.

我的代码:

loadCamera(sourceType){

    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      sourceType: sourceType
    }

    this.camera.getPicture(options).then((imageData) => {

      // imageData is either a base64 encoded string or a file URI
      // If it's base64:
      let base64Image = 'data:image/jpeg;base64,' + imageData;

      var thisModule = this;

      function success(newUrl) {
          console.log("Success Editing!", newUrl);
          thisModule.goToCreate(newUrl);
      }

      function error(error) {
          console.log("Error!", error);
      }

      /* Optional `options` object. See API guide for usage. */
      var options = …
Run Code Online (Sandbox Code Playgroud)

aviary ionic-framework adobecreativesdk ionic2 angular

9
推荐指数
1
解决办法
4251
查看次数