开发app过程中需要进行子页面tabs隐藏,网上找了N多方案,度娘出来的都是写指令, 但是测试中bug明显,于是墙外谷歌。。终于找到完美的方法,如下 tabs.html<ion-tabs class=" " ng-controller="TabsCtrl" ng-class="{‘tabs-item-hide‘: hideTabs}"></ion-tabs>controller里.controller(‘TabsCtrl‘, function($scope, $rootScope, $state) { $rootScope.$on(‘$ionicView.beforeEnter‘, function() {var statename = ...
问题描述:前一次创建利用命令行创建ionic项目一次性成功,第二次没有运行:$ npm install -g ionic cordova直接运行:ionic start ionicDemo出现上图错误: × Running command - failed!Exception: npm ERR! path C:\work\ionicdemo\node_modules\fsevents\node_modulesnpm ERR! code EPERMnpm ERR! errno -4048npm ERR! syscall scandirnpm ERR! Error: EPERM: operation not permitted, scandir ‘C:\work\ionicdemo\node_modul...
本文转自:http://www.cnblogs.com/maoyazhi/p/4332362.html欢迎访问我们的网站,网站上有更多关于技术性的交流:http://www.ncloud.hk/技术分享/ionic-plus-angularjs-angular-translate-国际化本地化解决方案/一、手动切换语言1.在app.js文件中首先要加上一个参数:?1angular.module(’passbox’,[‘ionic’,’pascalprecht.translate’])2.需要引用js文件?1<script src=”js/angular-tran...
原文网址:http://mclspace.com/2016/01/16/ionic-problems-and-solutions/前言Ionic是目前较为流行的Hybird App解决方案,在Ionic开发过程中会遇到很多常见的开发问题,本文尝试对这些问题给出解决方案。一些常识与技巧list 有延迟,可以在ion-content处使用 overflow-scroll="true"尝试在<i>上用ng-click上是没效果的<label>标签内的事件会在整个label内被触发,点哪都触发快捷修改背景色能用ng-if就用ng-if,ng-if的效率比ng-show...
在 iOS中, tabs 一直处于底部. 在android中 ionic tabs 一直在顶部,如果要改我们可以通过配置$ionicConfigProvider
.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
$ionicConfigProvider.platform.ios.tabs.style(‘standard‘);
$ionicConfigProvider.platform.ios.tabs.position(‘bottom‘);
$ionicConfigProvider.platform.android.tabs.style(‘standard‘);
...
在app.js中.config中添加如下代码$ionicConfigProvider.platform.ios.tabs.style(‘standard‘);
$ionicConfigProvider.platform.ios.tabs.position(‘bottom‘);
$ionicConfigProvider.platform.android.tabs.style(‘standard‘);
$ionicConfigProvider.platform.android.tabs.position(‘bottom‘);$ionicConfigProvider.platform.ios.navBar.alignTitle(‘center‘);
$ionicConfigProvider.platform.android.navBar.alignTit...
Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它 提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择。
ionic 特点
1.ionic 基于Angular语法,简单易学。[3]
2.ionic 是一个轻量级框架。
3.ionic 完美的融合下一代移动框架,支持 Angularjs 的特性, MVVM ,代码易维护。
4.ionic ...
这篇文章主要介绍了解决ionic和angular上拉加载的问题,需要的朋友可以参考下说到ionic上拉加载就跟pc的分页是一样的,他需要在html数据列表的最下面边添加<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="10%">
</ion-infinite-scroll>当列表为空 当ng-if为true的时候, 列表没有被填充满的时候 ,他就会自动加载loadMore();<span style="font-size:18px;"> //如果请求到的数...
前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也会有一些冲突,所以我们可以自己写一个图片上传的方法。
今天的demo是帮朋友做的一个移动端微信公众号项目,项目架构采用angular+ionic,因为对dom的操作jQuery会方便很多,但是jQuery比较厚重,所以最后选择用轻量级的z...
说到ionic上拉加载就跟pc的分页是一样的,他需要在html数据列表的最下面边添加
<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="10%">
</ion-infinite-scroll> 当列表为空 当ng-if为true的时候, 列表没有被填充满的时候 ,他就会自动加载loadMore();
<span style="font-size:18px;"> $scope.loadMore = function() { Msdk.postJSON(/informNotice/queryNoticeInfo, { pageIndex: $scope.newsL...
问题
之前在使用ionic2时使用建立android平台命令或者编译时,总是会在获取gradle时卡住,等很久进度也不变化,导致命令超时失败。于是经过查阅资料和自己实践测试,总结出以下办法。
方法
其实主要原因是用命令下载时用的是指定的下载途径(可能不该这样形容,欢迎大家评论批评指正),国内通过这样下载十分慢,甚至时断时续,从而导致出现上面的问题。
所以我们自己去下载gradle,存放在本地,然后更改配置文件,使其不去网上下载...
使用ionic开发app的时候,会发现切换页面的动画会卡顿,并不流畅,为了保证用户体验,大部分人会使用禁用动画的方法$ionicConfigProvider.views.transition(no);,但并不是最好的解决思路,cordova提供了native transitions可以让页面切换近乎原型的体验。主要步骤如下:
1、npm install ionic-native-transitions --save 下载该文件,并放入www/lib文件夹下
2、在index.html中加入<script src="lib/ionic-native-transitions/dist...
在有tabs的项目里,进入子层级时,底部导航还一直存在,本人是要让他只在首页几个界面存在,其他的隐藏,在这里用到了angularjs的指令,要完成这个步骤分为三步:
在标签ion-tabs中添加:ng-class=”{‘tabs-item-hide: $root.hideTabs}”,源码如下
<ion-tabs class="tabs-icon-top" ng-class="{tabs-item-hide: $root.hideTabs}">
//tabs
</ion-tabs>添加angularjs的指令,源码如下:
//app已经在其他文件中指定,如var app = ...
IONIC subheader是我们常用的一个css 属性,但是这个subheader的高度是固定的,当然也是可以改变的,但是如果改了subheader的告诉,还要更改content的top值,稍微有些麻烦,如果是动态告诉的subheader就麻烦了,还需要动态更改content的top数值,所以就写了一个directive解决这个问题:
上代码吧:
主要代码
/**
* Created by Richard on 9/21/16.
*/
use strict;
// @ngInject
module.exports = function() {
return {
link: func...
这是一个小bug,解决方法有两种:根据做的东西不同选择不同的
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
<h2>helloafds</h2>
</ion-nav-bar>
<ion-header-bar class="bar-subheader">
<h1>hello</h1>
</ion-header-bar>上面一种是使用比如有后退,导航的,下面是真正的一个header,一个subheader
<ion-header-bar align-title="left" class="b...