IONIC - 技术教程文章
ionic之样式bar-energized【图】
1、实例背景 ionic头部bar-header，设置样式bar-energized2、实现源码<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>ionic之样式bar-energized</title><link rel="stylesheet" href="../css/ionic.css" /><script type="text/javascript" src="../js/ionic.bundle.js" ></script><script>var app = angular.module("e...
ionic之样式bar-balanced【图】
1、实例背景 ionic头部bar-header，设置样式bar-balanced2、实现源码<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>ionic之样式bar-balanced</title><link rel="stylesheet" href="../css/ionic.css" /><script type="text/javascript" src="../js/ionic.bundle.js" ></script><script>var app = angular.module("bal...
ionic之样式bar-calm【图】
1、实例背景 ionic头部bar-header，设置样式bar-calm2、实现源码<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>ionic之样式bar-calm</title><link rel="stylesheet" href="../css/ionic.css" /><script type="text/javascript" src="../js/ionic.bundle.js" ></script><script>var app = angular.module("calmApp",["...
ionic之样式bar-positive【图】
1、实例背景 ionic头部bar-header，设置样式bar-positive2、实现源码<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>ionic之样式bar-positive</title><link rel="stylesheet" href="../css/ionic.css" /><script type="text/javascript" src="../js/ionic.bundle.js" ></script><script>var app = angular.module("pos...
ionic之样式bar-stable【图】
1、实例背景 ionic头部bar-header，设置样式bar-stable2、实现源码<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>ionic之样式bar-stable</title><link rel="stylesheet" href="../css/ionic.css" /><script type="text/javascript" src="../js/ionic.bundle.js" ></script><script>var app = angular.module("stableA...
ionic之样式bar-light【图】
1、实例背景 ionic头部可以利用bar-header，设置样式bar-light2、实现源码<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>ionic之样式bar-light</title><link rel="stylesheet" href="../css/ionic.css" /><script type="text/javascript" src="../js/ionic.bundle.js" ></script><script>var app = angular.module("t...
ionic之样式button【图】
1、实例背景 ionic中常见的按钮button，设置按钮样式用class="button"，这个是设置普通样式2、实现源码<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>ionic之样式button</title><link rel="stylesheet" href="../css/ionic.css" /><script type="text/javascript" src="../js/ionic.bundle.js" ></script><script>var...
ionic之底部bar-footer【图】
1、实例背景 ionic标题是bar-header，副标题是bar-subheader，底部标题bar-footer2、实现源码<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>ionic之底部bar-footer</title><link rel="stylesheet" href="../css/ionic.css" /><script type="text/javascript" src="../js/ionic.bundle.js" ></script><script>var app ...
ionic之副标题bar-subheader【图】
1、实例背景 ionic的标题是bar-header，副标题是bar-subheader2、实现源码<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>ionic之副标题bar-subheader</title><link rel="stylesheet" href="../css/ionic.css" /><script type="text/javascript" src="../js/ionic.bundle.js" ></script><script>var app = angular.mod...
ionic之创建列表【图】
1、实例背景 ionic创建动态列表，根据AngularJS赋值2、实现源码<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>ionic之创建列表</title><link rel="stylesheet" href="../css/ionic.css" /><script type="text/javascript" src="../js/ionic.bundle.js" ></script><script>var app = angular.module("initApp",["ionic...
ionic之样式bar-dark【图】
1、实例背景 ionic头部bar-header，设置样式bar-dark2、实现源码<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>ionic之样式bar-dark</title><link rel="stylesheet" href="../css/ionic.css" /><script type="text/javascript" src="../js/ionic.bundle.js" ></script><script>var app = angular.module("darkApp",["...
ionic之样式bar-royal【图】
1、实例背景 ionic头部bar-header，设置样式bar-royal2、实现源码<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>ionic之样式bar-royal</title><link rel="stylesheet" href="../css/ionic.css" /><script type="text/javascript" src="../js/ionic.bundle.js" ></script><script>var app = angular.module("royalApp"...
ionic之简单实例【图】
1、实例背景 ionic是基于AngularJS，是一个框架。根据AngularJS双向绑定变量，动态获取值。2、实现源码<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>ionic之简单实例</title><link rel="stylesheet" href="../css/ionic.css" /><script type="text/javascript" src="../js/ionic.bundle.js" ></script><script>var a...
ionic之样式bar-assertive【图】
1、实例背景 ionic头部bar-header，设置样式bar-assertive2、实现源码<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>ionic之样式bar-assertive</title><link rel="stylesheet" href="../css/ionic.css" /><script type="text/javascript" src="../js/ionic.bundle.js" ></script><script>var app = angular.module("a...
ionic之切换开关【图】
1、实例背景 ionic切换开关toggle，设置样式用的是toggle-calm、toggle-light等2、实现源码<!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>ionic之切换开关</title><link rel="stylesheet" href="../css/ionic.css" /><script type="text/javascript" src="../js/angular/angular.js" ></script><script...
ionic之单选框【图】
1、实例背景 ionic单选框用的是radio，设置样式item-radio2、实例源码<!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>ionic之单选框</title><link rel="stylesheet" href="../css/ionic.css" /><script type="text/javascript" src="../js/angular/angular.js" ></script><script type="text/javascrip...
ionic之样式复选框【图】
1、实例背景 ionic复选框用的是checkbox，checkbox有各种各样的样式2、实例源码<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>ionic之样式复选框</title><link rel="stylesheet" href="../css/ionic.css" /><script type="text/javascript" src="../js/ionic.bundle.js" ></script></head><body ng-app="calmApp" ng-...
ionic之无序列表【图】
1、实例背景 ionic无序列表利用的是ul-li实现，无序列表内容用的是AngularJS赋值，样式用class="list"和class="item"2、实现源码<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>ionic之无序列表</title><link rel="stylesheet" href="../css/ionic.css" /><script type="text/javascript" src="../js/angular/angular....
ionic之样式button-stable【图】
1、实例背景 ionic按钮button，设置样式为button-stable2、实现源码<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>ionic之样式button-stable</title><link rel="stylesheet" href="../css/ionic.css" /><script type="text/javascript" src="../js/ionic.bundle.js" ></script><script>var app = angular.module("sta...
ionic4+angular7+cordova上传图片功能的实例代码【图】
前言 ionic是一个垮平台开发框架，可通过web技术开发出多平台的应用。但只建议开发简单应用。复杂的应用需要用到许多cordova插件，而cordova插件的更新或者移动平台的更新很可能导致插件的不可用，维护升级成本较高。安装插件 安装插件Image Picker $ ionic cordova plugin add cordova-plugin-telerik-imagepicker $ npm install @ionic-native/image-picker安装插件File Transfer $ ionic cordova plugin add cordova-plugin-fil...
ionic使用angularjs表单验证（模板验证）【图】
1什么是模板验证 顾名思义模板验证就是通过一些angularjs的属性来在html标签中验证，为了往模板驱动表单中添加验证机制，你要添加一些验证属性，就像原生的 HTML 表单验证器。 Angular 会用指令来匹配这些具有验证功能的指令。每当表单控件中的值发生变化时，Angular 就会进行验证，并生成一个验证错误的列表（对应着 INVALID 状态）或者 null（对应着 VALID 状态）。 2示例 这是我写的一个小demo,这种验证方式无需写js代码全部在标...
ng-events类似ionic中Events的angular全局事件
介绍 ng-events 在 Angular 2 以上的版本中使用，类似于 ionic 中的 Events。可以使用 ng-events 注册一个全局事件，然后在需要的时候触发这个事件。 GitHub地址 快速开始 npm install ng-events --save 在 Angular 6 以上的版本中使用,修改 angular.json 文件, 在Angular 6以下版本中使用，修改.angular-cli.json文件"scripts": ["node_modules/ng-events/dist/ng-events.js"// ...]当然也可以直接在index.html中引入，不过并不推...
ionic grid(栅格)九宫格制作详解【图】
本文实例为大家分享了ionic grid九宫格制作的具体代码，供大家参考，具体内容如下 1、Html <ion-header-bar class="bar bar-header bar-light bar-calm"><button class="button button-icon icon ion-navicon"></button><ion-title class="bar-calm">腾讯新闻</ion-title> </ion-header-bar><ion-content><div class="row row-wrap"><div class="col col-25" ng-repeat="item in items"><img src="img/ionic.png" ng-click="alertC...
基于ionic实现下拉刷新功能
本文实例为大家分享了ionic实现下拉刷新功能的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html><head><meta charset="utf-8" /><title>ionic</title><!--记得导入ionic包和ionic样式--><script src="js/ionic.bundle.min.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="css/ionic.css" rel="external nofollow" /><!--ionicangular$http--服务ng- 指令表达式 {{}}...
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
1.Ionic3.x中页面(组件)之间正向传值方式？这里所说的正向传值指的是如有两个页面，我们简称 页面A 和 页面B,正向指的是A跳转到B,比如一个商品跳转这个商品的详情页面。 正向传值Ionic3.x主要有2种 标签上直接跳转Js跳转1) 标签上直接跳转Ionic3.x对Angular2以上的的路由进一步封装,路由跳转主要是由模块 NavController 来完成的,传递参数主要是由模块 NavParams 来完成的,用法如下 A页面内容: htmll：代码 <button [navPush]="bPa...
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
1.Ionic3.x 页面正向传值关于正向传值，上一篇文章里面有讲，具体可以看这里：//www.gxlcms.com/article/136302.htm 2.Ionic3.x 页面 pop反向传值,主要有两种方式 1 .利用ES6提供 Promise 对象 2 利用Ionic3.x提供Event对象,观察者模式(publish/subscribe) 1)利用ES6提供 Promise 对象这边假设有两个页面A页面, B页面, 情景如下，A跳转B页面，在B页面返回A页面需要给A页面选回的值。A页面代码html内容<button (tap)="goT...
ionic2中使用自动生成器的方法【图】
ionic generator是命令行的功能，ionic2自动帮我们创建应用程序，从而节省了大量的时间，并增加我们的速度来开发一个项目的关键部分。 ionic generator使我们可以自动创建以下几部份： ?component ?directive ?page ?provider 一、创建页面：ionic g page [PageName] 通过这个命令创建一个新的页面，ionic2项目中这个命令使??用最多 我们只需要进入我们的命令行中，并运行下面的命令： ionic g page login # Results: √ Create a...
Ionic学习日记实现验证码倒计时【图】
前言 要做一个app的话，肯定会涉及到这个功能，所以就从网上找了许多前辈的资料，找到了一个最适合自己并且方便理解的实现此功能，写此日记方便未来自己复习和其他人学习 思路 在用户注册的时候，时下不少app都选择了绑定手机号注册，这是一个非常好的想法，便捷用户操作，也很方便遵循实名制的问题，在设计按钮的时候，需要让他显示在输入验证码的旁边，并在用户点击后，开始倒计时，并将按钮变成无法点击效果点击前点击后 在本篇...
利用Angular2 + Ionic3开发IOS应用实例教程【图】
从 Angular1 到 Angular2Angular2 作为著名前端 MVVM 架构 Angular1 的继承者，从一定程度上说，引领了新一代 Web 前端开发技术的革新。从最新版的 ember.js, react.js, vue.js 中，可以看到这几种技术相互借鉴，取长补短，最终向一种技术方向演进。 组件化技术的崛起Angular1 也有组件，叫另外一个名字：指令。在 Angular1 中，指令是 DOM 元素紧密结合的一段包含控制逻辑、数据管理的代码。在指令中，我们可以清楚的看到 Angular...
ionic3实战教程之随机布局瀑布流的实现方法【图】
前言 最近一段时间由于项目需要接触到了ionic3,发现真是一个利器啊!ionic项目提供了一套丰富的图标库，在ionic3中也进行了升级。公司的一个项目中由于要用到一个瀑布流的特效，找了半天竟然没有找到相关的资源，没有办法，只能迎着头皮上了~话不多说，先上图相信看过图片的同学都明白什么意思了吧。对，就是瀑布流！但是今天我们的瀑布流可不是一般的瀑布流。让我们接着看:自动排版我们的要求是做那种随机凌乱的感觉，所以我们需要...