标签: ionic-framework

我正在使用 ionic 框架构建一个移动网站。我想用 AngularJS（或 ionic）检测移动设备（Android 和 iOS）。

如果访问设备是Android \xe2\x86\x92 #/android\n如果访问设备是iOS \xe2\x86\x92 #/ios

控制器.js

function uaCtrl(\'$scope\', \'$location\', ($scope, $location) {\n$scope = function () {\n  var isMobile = {\n    Android: function() {\n      return navigator.userAgent.match(/Android/i);\n    },\n    iOS: function() {\n      return navigator.userAgent.match(/iPhone | iPad | iPod/i)\n    }\n  }\n\n  if(isMobile.Android()) {\n    $location.path(\'#/android\');\n  }else if(isMobile.iOS()) {\n    $location.path(\'#/ios\');\n  }else{\n    $location.path(\'#/ios\');\n  }\n\n};\n

};

应用程序.js

.config(function($stateProvider, $urlRouterProvider) {\n  $urlRouterProvider.otherwise(\'/dash\');\n\n  $stateProvider\n\n  .state(\'home\', {\n      url: \'/dash\',\n      templateUrl: \'templates/dash.html\'\n    })\n\n  .state(\'android-home\', {\n    url: \'/android\',\n    templateUrl:\'templates/dash-android.html\'\n  })\n\n …

我在 IONIC 框架中创建了一个小应用程序，我有 3 个选项卡，我创建了左右滑动选项卡。但我的问题是我无法在第一个选项卡中滚动我的卡片。

代码：

我尝试将其ion content scroll从 false 更改为 true，但是当我滚动时，选项卡栏也会随着我的文本内容移动。

<ion-content scroll="false" class="has-subheader">

    <ion-slide-box show-pager="false" ion-slide-tabs>
        <ion-slide ion-slide-tab-label="TOP">
            <div class="list card ">

  <div class="item item-avatar">
    <img src="img/pic1.jpg">
    <h2>Author name</h2>
  </div>

  <div class="item item-body">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum, elit non scelerisque tincidunt, magna ligula elementum lectus, eget tempor dolor nisl at mauris. Curabitur eget ultrices ligula.
    </p>
    <img class="full-image" src="img/pic2.jpg">
    <p>
      <a href="#" class="subdued">1 Like</a>
      <a href="#" class="subdued">5 Comments</a>
    </p> …

这绝对是一个基本问题，但我正在尝试在 Ionic 中做到这一点。我一直在努力

margin: 0 auto;
text-align: center;
position: relative; 

做了很多事情，但不起作用，有帮助吗？

更新：所以我尝试了其中一种解决方案，这是我的CSS，但它仍然不起作用，它的中心，但一直在顶部

.square{
    width: 25vw;
    height: 8vw;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

HTML：

<div class="container"
    <div class="button-wrapper">
        <button class="button button-outline square button-calm">
            Male
        </button>
        <button class="button button-outline square button-royal">
            Female
        </button>
    </div>
</div>

我正在编写一个 Ionic 应用程序 - 所以这是 Angular 1.x 中的

我有两个数字数组：

var arr1 = [1,32,423,43,23,64,232,5,67,54];
var arr2 = [11,32,1423,143,123,64,2232,35,467,594];

数组中有两个常见的数字32和64。

如果 2 个数组中至少有 1 个公共数字，我希望某些 JavaScript 能够有效地返回 true。

我有以下代码

angular.forEach(arr1 , function (arr1 , count) {
      if ( inArray(arr1 , arr2) )
      {
        return true;
      }
  });

我在 ionic react 应用程序中有一个选项卡导航页面，我想向该页面添加一个侧边菜单，我知道我必须使用 IonMenu 组件，但我正在努力将两者合并。这是我的代码，指示我如何实现标签导航：

import React, { Component } from "react";
 import {
  IonIcon,
  IonLabel,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonTabs,
} from "@ionic/react";

import { Redirect, Route } from "react-router-dom";
import { IonReactRouter } from "@ionic/react-router";
import { home, at, albums,addCircleOutline } from "ionicons/icons";

import Tab1 from "./Tab1";
import Tab2 from "./Tab2";
import Tab3 from "./Tab3";
import Tab4 from "./Tab4";

class Home extends Component {
  render() {
    return (
      <IonReactRouter>
        <IonTabs>
          <IonRouterOutlet>
            <Route path="/tab1" component={Tab1} exact={true} />
            <Route path="/tab2" …

在我的项目中，我想使用带有标签和图标的“离子项目”。类似的东西：

<ion-item>
   <ion-label>Itens</ion-label>
   <ion-label><i class="icon-search"></i></ion-label>
</ion-item>

问题是IOS默认已经在'ion-item'中使用了一个图标。我不想只为 android 更改按钮模式，我还是想使用原生元素样式。

我的问题是：有没有办法根据平台隐藏/显示元素？

我看到有人在谈论 Ionic 3 中的“showWhen”属性，但显然，它不再起作用了......

这是 Ionic Web 应用程序上的侧边菜单。

    <ion-content>
            <ion-list>
    
              <ion-menu-toggle autoHide="false" *ngFor="let p of appPages; let i = index">
    
    
                <ion-item (click)="selectedIndex = I" 
[class.selected]="selectedIndex == i" tappable (click)="goToPage(p)">
    
                  <ion-icon slot="start" [name]="p.ionicIcon? p.ionicIcon: ''"></ion-icon>
                  <ion-label>
                    {{p.title}}
                  </ion-label>
    
                </ion-item>
    
              </ion-menu-toggle>
    
            </ion-list>
          </ion-content>
    
        </ion-menu>

文档：https : //ionicframework.com/docs/api/item#css-custom-properties

这里我需要给出一个悬停效果。但它不起作用。这里的关键是你可以看到我routerLink在这里不使用。那我该怎么做呢？

我试过这个。但不工作。

ion-item:hover {
  --background-hover: gray !important;
}

刚刚用 Cordova、Node 等的所有最新和最好版本构建了一个新的 Maccordova/ionic 环境 - 但仍在运行一个 Ionic v1 项目。我的应用程序正在编译并部署到设备，但我的所有图像都损坏了，源代码显示如下：

<img class="loading" ng-src="img/ajax_loading.gif"src="unsafe:ionic://myApp/img/ajax_loading.gif">

旧 Mac：Cordova@9.0.0 (cordova-lib@9.0.1) 和cordova-ios@5.0.1 新Mac：Cordova@9.0.0 (cordova-lib@9.0.1) 和cordova-ios@5.1.1

看起来 5.0.1 和 5.1.1 之间发生了一些变化 - 但我不知道是什么。有没有插件可以解决这个问题，或者我该如何解决这个问题。我的应用中有很多图片都坏了。

我想在我的 Ionic 5 / Angular 9 项目中添加一些 jquery 函数。

我从 angular.json 文件中调用文件。一些功能可以工作，因为我已经通过 npm 安装了 Jquery 和 Bootstrap。

但我不知道如何能够使用其他人。

这些是文件

"scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js",
          "src/assets/js/bootstrap.min.js",
          "src/assets/js/charts.js",
          "src/assets/js/colors.js",
          "src/assets/js/filters.js",
          "src/assets/js/global.js",
          "src/assets/js/idangerous.swiper.min.js",
          "src/assets/js/isotope.pkgd.min.js",
          "src/assets/js/jqColorPicker.js",
          "src/assets/js/jquery-2.1.4.min.js",
          "src/assets/js/jquery-ui.js",
          "src/assets/js/jquery-ui.min.js",
          "src/assets/js/jquery.canvasjs.min.js",
          "src/assets/js/jquery.countTo.js",
          "src/assets/js/jquery.easy-autocomplete.min.js",
          "src/assets/js/jquery.mixitup.js",
          "src/assets/js/jquery.viewportchecker.min.js",
          "src/assets/js/magnific.js",
          "src/assets/js/map.js",
          "src/assets/js/script.js",
          "src/assets/js/sorttable.js",
          "src/assets/js/wow.js"
        ]
      },

任何提示？

我试图用最小和最大实现离子日期时间选择器。如果 min 将增加 30 分钟，如果 max 它将减去 30 分钟。我该怎么做才能实现它.. stackblitz

HTML

<ion-item>
    <ion-label>Start Time</ion-label>
    <ion-datetime displayFormat="h:mm A" min="01:00" max="10:00" pickerFormat="h mm A" minuteValues="0,30"></ion-datetime>
</ion-item>