IONIC - 技术教程文章
ionic2打包android时gradle无法下载的解决方法
问题 之前在使用ionic2时使用建立android平台命令或者编译时，总是会在获取gradle时卡住，等很久进度也不变化，导致命令超时失败。于是经过查阅资料和自己实践测试，总结出以下办法。 方法 其实主要原因是用命令下载时用的是指定的下载途径（可能不该这样形容，欢迎大家评论批评指正），国内通过这样下载十分慢，甚至时断时续，从而导致出现上面的问题。 所以我们自己去下载gradle，存放在本地，然后更改配置文件，使其不去网上下载...
ionic2 tabs 图标自定义实例【图】
一、准备资源 tabs icon 的svg格式的矢量图片二、生成字体样式文件 打开icoMoon网站去制作字体文件。三、使用字体文件 解压下载的文件，将其中的fonts文件夹拷贝到ionic2项目的src/assest目录下。并且将其目录下的styles.css文件命名为wecare.scss(这个名称是你字体的文件名称)，再将其拷贝到ionic2项目的src/assest/fonts目录下。下来我们去修改wecare.scss文件。修改@font-face中的引用地址。 $font-path: ../assets/fonts; @fon...
使用ionic在首页新闻中应用到的跑马灯效果的实现方法【图】
在app中经常会有滚动的跑马灯效果的运用，如图所示为跑马灯效果： 代码如下： html： <div class="shouRight"><ul class="slideTopbox" slide-scroll style="top:0px;"><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1.我是第1行</a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofoll...
Ionic+AngularJS实现登录和注册带验证功能【图】
登录： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link rel="manifest" href="manifest.json" rel="external nofollow" > <!-- un-comment this code to enable service worker <script> if (serviceWorker in navigator) { navigator.serviceWorker.register(service-worker.js) .the...
ionic中列表项增加和删除的实现方法【图】
在项目中遇到表单似的页面，需要进行增加一行和减少一行的操作，例如： 要实现可以选中商品，以及对商品的信息列表进行显示与否的操作 html代码如下： <div class="chanpinxiangqing"><div class="item item-divider">产品明细</div><div class="chanpinxiangqing" ng-repeat="master in masters"><div class="item item-divider"><div class="" ng-click="selectorOne($index)" style="display: inline-block;width: 50%;"><div...
Ionic 2 实现列表滑动删除按钮的方法【图】
在上篇文章给大家介绍了ionic中列表项增加和删除的实现方法，接下来通过本文给大家介绍Ionic 2 实现列表滑动删除按钮的方法，具体内容详情如下所示： 使用Ionic这种框架伟大的地方在于用户界面元素默认准备好了，意味着你可以设计更好的app而不需要很强的用户体检设计背景，而且让你可以更容易实现这些模式。 这篇教程将展示如何使用Ionic2添加一个简单的删除按钮到列表，当用户滑动列表项到左边的时候。这是一个处理删除列表数据时...
angular+ionic 的app上拉加载更新数据实现方法
第一步，首先需要在<ion-content>标签里面加入标签<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="5%"></ion-infinite-scroll> 里面的属性解释， ng-if 值 布尔型，如果为true，则可以触发上拉事件 on-infinite 上拉时触发的事件 distance 列表底部滚动到可触发上拉事件的距离，默认为1% icon 加载时显示的加载图标，默认为 ion-loading-d 第二步：在控制器内书写 $scope.hasmore = true; 定义可触发事...
简单实现IONIC购物车功能
本文实例为大家分享了IONIC购物车的具体代码，供大家参考，具体内容如下 HTML <div ng-app="app"><div class="l-header"><div class="l-cart"><div class="l-cart-count" ng-click="showCart = !showCart">{{ calculateTotalProducts() }}</div><div class="l-cart-items" ng-show="showCart"><div ng-show="cart.length"><ul><li ng-repeat="item in cart"><div class="l-cart-item-name">{{ item.product.name }}</div><div clas...
ionic2 tabs使用 Modal底部tab弹出框
项目要实现一个功能，在首页底部中间的tab弹出一个页面，而且是没有底部栏的，而不是像平常滑动的一个子页面。 像这样： 做法其实很简单 1.修改tabs.html中的tab，去掉[root]="tab2root"属性，就不会显示子页面了 2.添加(ionSelect)方法，点击这个tab按钮的事件，用来显示你的弹出modal 去掉之前： <ion-tab [root]="tab5Root" tabIcon="call" (ionSelect)="call()" ></ion-tab> 去掉之后： <ion-tab tabIcon="call" (ionSelect)=...
ionic开发中点击input时键盘自动弹出【图】
ionic开发移动端界面时，在输入用户名和密码的时候，我希望输入法不要挡住我的输入框，并且输入框往上滚动的时候，顶部标题不要上移，只是input内容部分往上移动，点击密码输入框时我还想看见按钮，这样不用关闭输入法，也可以直接点击登录按钮，关闭输入法自动恢复成默认的界面，用户体验不错哦~；找了很多代码，以下代码是我想要的效果： .directive(focusInput, [$ionicScrollDelegate, $window, $timeout, $ionicPosition, fun...
ionic cordova一次上传多张图片（类似input file提交表单)的实现方法
我们可以通过cordova提供的插件调用摄像头或图库选择需要的图片上传，按cordova官方的方法，每次选择完后就直接上传，这并不符合用户的习惯，最好的用户习惯是用户选择完需要的图片，并可在本地预览，接着用户再次打开摄像头或图库再次选择图片，接着预览，对于不需要的图片删除，最后确定可以后，再一次性上传所有图片。显然这种方式，cordova是不支持，那要如何实现呢，以下是我的方法： 通过调用$cordovaImagePicker.getPicture...
使用ionic切换页面卡顿的解决方法
使用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...
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
在有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 = ...
Ionic2系列之使用DeepLinker实现指定页面URL
Ionic2使用了近似原生App的页面导航方式，并不支持Angular2的路由。这种方式在开发本地App的时候比较方便，但如果要用来开发纯Web页面就有点问题了，这种情况下Angular2的router可以提供更灵活的配置。比如在首页是一个Tabs页面的情况下，如何控制用户看到的第一项Tab？默认情况下都是会导航到第一个Tab，而且地址栏的URL并不会跟随页面的切换而变化。好在Ionic2提供了一种类似路由的DeepLinker功能，可以实现以上目的。 DeepLinke...
IONIC自定义subheader的最佳解决方案
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...
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
这是一个小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...
使用JS轻松实现ionic调用键盘搜索功能(超实用)
这个需求是产品提的，一开始只是设置了 <input style="padding-top: 3px;" type="search" placeholder="搜索医生或医院" ng-model="query"> type="search" 发现android上可以ios调取不出search健来，气死我了，经过google的搜索得到结论，需要在外面套用一个form表单，于是加上果然好使而且结合了form表单提交的事件直接调用了button 按钮的点击事件ng-click="searchSelect()"，不需要额外再去监听搜索键盘点击事件，省了一大堆的麻...
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
在使用ionic开发IOS系统微信的时候会有一个苦恼的问题，填写表单的时候键盘会挡住输入框，其实并不算什么大问题，只要用户输入一个字就可以立刻看见输入框了。可惜的是，有些客户是不讲理的，他才不管这个问题，反正就是不行，所以在一天睡觉的时候突然惊醒，想出来这个方案。我就不仔细讲代码了，直接上图 angular.module(MyApp) .directive(focusInput, [$ionicScrollDelegate, $window, $timeout, $ionicPosition, function...
ionic实现可滑动的tab选项卡切换效果【图】
利用ionic的slide-box组件实现可滑动的tab，主要是监听tab点击以及slide页面滑动的事件，做相应的处理，用ng-repeat循环，优化、简略了代码，有需要的同学可以看看。 先来张效果图： 用到的css代码: .tab_default{ border-bottom:solid 1px #F2F2F2;padding:6px 0; } .tab_select{border-bottom:solid 1px #3E89F5;box-shadow:0 -3px 8px #C1D3F0 inset; } .arrow-top {position: absolute;width: 0;height: 0; top:20px; border: ...
ionic实现带字的toggle滑动组件【图】
前言 由于项目中需要带字的toggle滑动组件，而ionic提供的是这样的：实际项目中需要这样子的:在网上找了下其他的实现，感觉没得类似的，也没发现合适的，于是自己试着定义了一个凑合着用。先上效果图 看效果图边缘有模糊锯齿现象，可能是由于像素的影响，在android和ios手机上表现非常流畅。 实现代码 其实实现起来也很简单，主要是算好滑块的位置，滑动用的是css的transform. css用到的类如下: .switch_search{position:relativ...
Ionic默认的Tabs模板使用实例【图】
Ionic 默认的Tabs 模板 ，Android的在上方，IOS的在下方。在www/js/app.js修改配置，添加一个变量，再修改相应属性： .config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {$ionicConfigProvider.platform.ios.tabs.style(standard); $ionicConfigProvider.platform.ios.tabs.position(bottom);$ionicConfigProvider.platform.android.tabs.style(standard);$ionicConfigProvider.platform.android.tab...
ionic组件ion-tabs选项卡切换效果实例【图】
介绍ion-tabs是ionic中的选项卡组件，路由使用的是angular-ui-router.js。因此必须先掌握uiRoute。 效果图实例代码index.html <body ng-app="starter"><!--ion-nav-view用来渲染模板--><ion-nav-view></ion-nav-view> </body> tab-index.html <ion-tabs class="tabs-icon-only tabs-icon-top "><!--href:选项卡对应的状态 icon-on:ion-tab非高亮图标 icon-off:ion-tab高亮图标--><ion-tab title="首页" href="#/tabs/home" icon-o...
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
今天在ionic中使用ng-model时候，在对应的controller里面获得值为undefined。以前在使用angularjs的ng-model绑定时候就可以拿到的啊，这就尴尬了，决定一探究竟。大家先看下面的一个demo。 在学习angularjs的ng-model的数据双向绑定时候，我们通过以下的代码拿到对应的ng-model的值： demo1 <div ng-app="myApp" ng-controller="myCtrl">名字: <input ng-model="name">{{name}}<button ng-click="show()">shoName</button> </d...
ionic隐藏tabs的方法
本文为大家分享了ionic隐藏tabs的方法，供大家参考，具体内容如下 1. <ion-tabs ng-class="{tabs-item-hide: $root.hideTabs}"> <!-- tabs --> </ion-tabs> 2. 在该控制器下加上.directive：var module = angular.module(app.directives, []); module.directive(showTabs, function ($rootScope) {return {restrict: A,link: function ($scope, $el) {$rootScope.hideTabs = false;}}; }).directive(hideTabs, function ($rootScop...
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
ionic 模型$ionicModal$ionicModal 可以遮住用户主界面的内容框。你可以在你的 index 文件或者是其他文件内嵌入以下代码(里面的代码可以根据你自己的业务场景相应的改变)。 <script id="my-modal.html" type="text/ng-template"> <ion-modal-view> <ion-header-bar> <h1 class="title">My Modal title</h1> </ion-header-bar> <ion-content> Hello! </ion-content> </ion-modal-view> </script>然后你就可以在你的 Controller 里面...
ionic js 复选框 与普通的 HTML 复选框到底有没区别【图】
ionic 复选框 ionic 复选框（checkbox）与普通的 HTML 复选框没什么区别，以下实例演示了 ionic 复选框 ion-checkbox 的应用。 <ion-checkbox ng-model="isChecked">复选框标签</ion-checkbox>实例 实例中，会根据复选框是否选中，修改 checked 值，true 为选中， false 为未选中。 HTML 代码 <ion-header-bar class="bar-positive"> <h1 class="title">复选框</h1> </ion-header-bar> <ion-content> <div class="list"> <ion-chec...
ionic 上拉菜单(ActionSheet)实例代码【图】
上拉菜单(ActionSheet)通过往上弹出的框，来让用户选择选项。 非常危险的选项会以高亮的红色来让人第一时间识别。你可以通过点击取消按钮或者点击空白的地方来让它消失。实例 HTML 代码 <body ng-app="starter" ng-controller="actionsheetCtl" > <ion-pane> <ion-content > <h2 ng-click="show()">Action Sheet</h2> </ion-content> </ion-pane> </body>JavaScript 代码 在代码中触发上拉菜单，需要在你的 angular 控制器中使用 $...
Ionic如何实现下拉刷新与上拉加载功能
IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。Ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各...
Ionic快速安装教程【图】
今天就让我们学习一下如何安装 Ionic 在自己的电脑上搭建一个简单的小应用。很多的网站上面都会写很复杂的安装方法，其实刚开始学习ionic的初学者，特别是没有很多编程经验的小伙伴是不是会吓跑了？感觉那么复杂需要安装什么node.js的环境啊、, 安装最新版本的cordova啊… … 其实不需要那么麻烦的。告诉大家我在做项目的时候怎么使用ionic的吧。 第一种方法：直接引入使用第一步 、首先下载Ionic ionic 最新版本下载地址：http://...
Ionic如何创建APP项目【图】
前面的章节中我们已经学会了ionic 框架如何导入到项目中。 接下来我们将为大家介绍如何创建一个 ionic APP 应用。 ionic 创建 APP 使用 HTML、CSS 和 Javascript 来构建，所以我们可以创建一个 www 目录，并在目录下创建 index.html 文件，代码如下： 大家按照步骤在自己的编辑器上来认真的完成这个APP的创建吧。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Todo</title> <meta name="viewport" content="initi...