创建我们项目的blank模版默认建立了一个Home组件，这个教程我们就在此基础上修改。...我们现在有了一个列表包含所有数据，用户可以滑动并显示出一个delete**按钮。现在剩下的是当用户点击时做点什么事。因此我们设置一个简单监听以便调用方法从我们先前创建的测试数据中删除一项。...4.创建方法删除数据 现在我们去到 home.js 文件编写方法处理数据删除。当前但删除按钮被点击时传送一个数据项给 removeItem。...button danger (click)="removeItem(item)"> Delete 现在滑动时你有两个按钮了...添加编辑按钮 然后你可以编写Edit按钮的点击事件了，具体取决于你的需求。 总结 Ionic2 这个特性真是太棒了，不仅能删除，还能轻易的添加其它按钮。
ion-nav-bar中 cache-view - 是否对这个模板视图进行缓存 允许值为：true | false，默认为true hide-back-button -是否隐藏导航栏中的返回按钮 当模板被载入导航视图时...hide-back-button的允许值为：true | false ，默认为false 注意：必须在导航栏中显式地声明返回按钮，否则即使将hide-back-button属性设为false， 这个按钮也不会出现...回退按钮 : ion-nav-back-button 你可能已经注意到前一节的示例中，当切换到小说页时，无处可去了！...好在ionic的指令ion-nav-back-button指令可以自动地让你回退到前一个视图： back-button>back-button...> 当视图切换时，回退按钮会自动出现在导航条中，并显示前一个视图 的标题。
ionic中的浮动框$ionicPopover 用ionic也有一段时间了，今天说一下它里面提供的一个小组件：浮动框 浮动框的使用在移动端的项目中已经很少了，只有在少数的一些特殊情况下才会出现。...在这里我们简单说一下浮动框的使用方式，仅供大家参考 浮动框的初始化 在控制器中注入$ionicPopover服务，通过如下的代码进行浮动框初始化 var app = angular.module("myApp...", ["ionic"]); app.controller("myCtrl", function($scope, $ionicPopover) { $ ionicPopover.fromTemplateUrl...ion-item>修改 删除 在页面中，可以通过实践进行调用...点击调用 点击按钮就会出现一个动态的浮动框效果，以上代码仅供参考。
还要注意,按钮本身我们给它一个属性的ion-button将会使用Ionic 2 的按钮样式，而icon-only样式将会让按钮只包含一个图标没有文本。...Todos 列表页面 在运行** ionic serve ** 时，因为既然我们导入了NavController服务，我们就可以在这个组件push或pop视图，如下所示： this.navCtrl.push...这次我们定义了另一个按钮,简单地调用了定义在add-item-page.ts中的saveItem函数。...同样注意到我们的保存按钮上使用了full属性，这个方便的小属性帮助我们设置按钮宽度为full。 2.5 建立添加项的类 现在我们将要建立一个类给我们的添加项组件。...我们现在导入import我们新增的AddItemPage组件到HomePage，当用户点击新增时我们就创建出该视图。
A: http://ionicons.com ---- Q: 在 ionic platform add xxx 时卡住 A: 挂 V** ，或者丢着睡一觉（不确定是不是网络原因，就遇过两次没深究...allow-intent href="sms:*"/> ---- Q: Android 中调用其他应用打开...---- Q: 替代 Modal 的方案 A: 在 $state.go 前记录下当前的 view ，然后禁止下一个 view 记录 backView ，就不会显示后退按钮（ Android 硬件后退也不行...在需要关闭时，后来加入导航栈的任意 view 中设置 backView 为记录下来的 view ，然后 back 。...serve 或在实机调试时开启了 livereload 功能时的跨域问题 A: 道理还是因为这两种状态下， APP 实际是在访问电脑上的一个网站，任何指向其他地方的链接都是跨域。
ionic3开发框架是angular4，所以了解一下angular4的一些基础知识，能让你更好的开发应用。...其实ionic3（angualr4）和ionic2（angular2）差不多，但和ionic1（angular1）就差别非常大了，可以说基本是推倒了重来。...在angular1时代，组件和指令是一回事，即严格来说，没有组件这概念，只有指令，而到了angular2时代，虽说组件仍是一种特殊的指令，但已经有一定目的明显区分开来，分别用Directive和Component...来标识，用cli生成命令就如下所示： ionic g directive 指令名 ionic g component 组件名 要说指令和组件的区别，简单说是不带视图和带视图的区别，直观效果是：一个为原有标签动态添加功能...，在调用指令的页面module.ts里导入指令并声明，反之，在app.module.ts里导入指令并声明，这样调用的组件就能识别该指令了： import { BgColorDirective } from
但在面对一众的选择时很多同学略感迷茫，是学习ios还是android开发？是学习原生开发、混合开发（比如：Ionic)，还是使用react native或者flutter这样的跨平台框架？...初始化vue项目： vue create vue-ionic-pwa 3. 因为ionic的路由依赖于vue-router，所以接下来安装 vue-router： vue add router 4....搜索组件，用于输入邮编并查询，2. 展示组件，用于展示查询到的邮编信息，3. 清除按钮，用于清除查询到的邮编信息 1....搜索组件 我们在 src/components 下面新建 ZipSearch.vue 文件作为邮编搜索组件，主要逻辑为当用户输入一串字符，按下搜索按钮，如果输入合法则触发get-zip事件，如果不合法则给出提示...信息展示和清除组件 获取到邮编信息后我们需要一个展示邮编信息的组件和一个清除信息的按钮，在 src/components 下面新建 ZipInfo.vue和ClearInfo.vue 。
favicon.ico"> 4e8ef7...任何这个文件夹下的东西都会在应用程序每次build编译时覆盖拷贝到你的build目录。...通常，我们导入NavController 使用与 MenuController 和Platform 同样的方式然后调用它的 setRoot，但是你不能从根组件调用它，作为替换我们获取引用通过Angular2...为构造函数中定义的每一个页面创建一个按钮，号语法意味这它将为每个页面创建一个嵌入式模版（它不会在DOM中渲染出上面的代码，而是使用模版创建），通过使用let p我们可以获取到某个特定页面的引用，用于点击事件时传递到...在 ListPage 组件中，我们通过 itemTapped 方法（ListPage 模版中，但某条记录被点击时触发） push 了 ItemDetailsPage ： itemTapped(event
前文再续，书接上一回，上上回说到自定义组件，本节应该讲怎么做自定义组件的同时怎么调用的，只是本实例应做自定义组件的有好几个，不可能每个都写出来讲解，这会显得冗余了，所以决定只把其中一个较有代表性的做成自定义组件...image.png 观察之，发布者和内容的文本信息可以用ionic现有的组件实现，而视频播放和图片画廊（如果是轮播图可以用slides组件，它是阉割并封装过的swiper，好像现在这样的效果不能实现）需要使用第三方组件...三、安装视频播放组件 用的是videogular2，可参考我另一篇文章：《【技巧】ionic3视频播放》 四、安装swiper组件 npm install swiper --save 四、实现首页 打开...initSwiper方法貌似要在页面渲染完成后才能使用，而getFriendNews获取数据后未必渲染完成，故不能马上调用，所以调用this.cd.detectChanges()来处理下，关于这个可以查看我另一篇文章...此外getFriendNews没有后续操作，所以异步调用省掉return。
2018在ionic项目中用到的组件有很多，这篇文章讲一讲ion-reorder-group这个组件的使用。刚开始我都不知道ionic4中已经封装了拖拽排序的组件，也是主管告诉我的。...使用了这个组件的经历告诉我：仔细读官方文档，是没错的！ HTML中使用组件，代码如下 ionic绑定在IonReorderGroup组件上的。...记得一定要设置disabled属性，不然不会有拖拽按钮出现。...return; } } customEvent继承自Event，添加了detail属性，包含from,to,complete,分别记录拖拽条目的前后index，complete方法需在拖拽结束后调用
这段时间没有做ionic相关的事，但看到群里有人问这个，写一下。 我在一篇文章【组件篇】ionic3开源组件提到过图像预览组件，可以看里面的源码，也可以看下面内容。...思路 首先，这种图像滑动缩放的一般是个整体页面，可以是普通的page，也可以用modal来弹出，为支持这两种方式也适用于懒加载，所以建议不做成组件，而是做成懒加载页面。...this.swiper = new Swiper(this.panel.nativeElement, { initialSlide: this.vm.selectedIndex,//初始化显示第几个...item.isChecked){ this.vm.selectedCount ++; }else{ this.vm.selectedCount --; } } } 说明：初始化...swiper时就设定了可缩放功能，其它功能是利用slideChange事件变更当前选中的索引，每个图像关联仿checkbox的按钮（直接用checkbox也行）来控制返回的图像列表。
先前写过一篇文章：【组件篇】ionic3图像手指缩放滑动预览，是原来封装的一个组件的原型，后来用ionic4后，这个组件不兼容，需要改，那时我开始考虑组件的封装不依赖于ionic自身的组件，所以重写了一个...组件的核心是使用了PhotoSwipe，它是Github上一个热门的开源项目，有近18K的star，可以上官网看效果，其中在手机端的效果如图： ?...caption__center"> 注意：别看内容那么多就吓到了，其实里面就多了一些按钮...第三步，最后js初始化使用： var pswpElement = document.querySelectorAll('.pswp')[0]; // build items array var items...，使用时这样应用： 在任何文件任何地方放置这样一个组件: 然后如下调用： @ViewChild(PhotoSwipeComponent) photoSwipe
设置主页（Home page） 3 持久化数据保存 4 总结 Ionic 2 实现列表滑动删除按钮 1.创建Ionic2应用 2.准备列表数据 3.修改主页（HOME）的模版 4.创建方法删除数据...5.添加一个编辑按钮 总结 Angular 2 新概念和语法 Angular 2 & Ionic 2 概念 Angular 2 语法 Ionic 2 导航简明指南 入栈出栈（Pushing...Ionic 2程序 开始之前 1 创建一个Ionic 2的应用 2 建立Ionic Cloud 3 生成证书和创建一个安全概要 4 使用Ionic Package 命令 总结 Ionic...在模版中使用 总结 Ionic 2 中的创建一个闪视卡片组件 1. 创建一个新的应用作为例子 2. 什么是组件？ 3. 创建组件模版 4. 创建组件类 5. 创建 CSS 动画 6....添加组件到模版 总结 Ionic 2 中创建一个照片倾斜浏览组件 1. 创建一个新的应用 2. 实现照片倾斜浏览组件 3.
依赖 安装ionic相关依赖（其中@ionic/core是组件部分，@ionic/vue是封装成Vue方式调用的接口部分）： npm i @ionic/core @ionic/vue 安装完成后，在main.js...中添加配置： import Ionic from '@ionic/vue'; import '@ionic/core/css/ionic.bundle.css'; Vue.use(Ionic); 再次运行...important; } 此时页面看到有东西了，那我们尝试下ionic的组件能不能用，在Home.vue页面添加一个按钮： 测试 可以看到组件渲染出来了，我们再试试看事件能不能响应，改造一下： 测试 ……...改造路由 @ionic/vue将Vue Router与Ionic Router Outlet捆绑在一起，使Ionic组件可以直接访问路由信息。作为回报，Ionic提供了令人赏心悦目的过渡效果。
entryComponents: [ // ... ], providers: [ // ... ] }) export class AppModule {} 之后，你就可以在页面或组件中注入...存储系统已经初始化完成。...则可以调用 set(key, value) 方法： this.storage.set('name', 'semlinker'); 若想要获取上面已存储的 name 信息，你可以调用 get(key) 方法...db.setDriver() 方法时，会调用内部的 _getDriverOrder() 方法转换成相应的驱动： private _getDriverOrder(driverOrder) { return...实际的开发过程中，在数据存储时，我们可能还会涉及数据响应式、数据加密、数据压缩、数据迁移和备份，有上述需求的同学，可以了解一下 rxdb 这个库。
Ionic这几个网站是需要经常看的，应该了解过才执行后面步骤，其中强烈要求至少先撸一遍官网的组件和API文档。...当出现下面内容时，说明项目创建成功。 ?...命令的区别，前者是把www目录打包进原生项目，而后者是执行ionic的编译、压缩、混淆等一系列操作后再调用cordova打包，即后者包含前者的操作。...$colors: ( primary: #387ef5, secondary: #32db64, danger: #f53d3d, light: #f4f4f4,...插件 混合式应用一个比较大的特点是调用原生，ionic调用原生方式为Cordova插件，为了更方便的调用，ionic2及以上封装了ionic-native，在使用之前，建议先了解下Cordova的基本知识
设计App,使用WebStorm开发(3) – 构建页面架构 实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI 实战使用Axure设计App,使用WebStorm开发(5...所有工程代码放在了 https://github.com/zhangsichu/DeliveryApp 同时上篇文章中创建的初始化工程，也Tag了 TheInitialProject，您可以使用 Git...checkout 这个Tag, 也可以直接到：https://github.com/zhangsichu/DeliveryApp/releases/tag/TheInitialProject 去下载初始化的工程代码...到这一步您可以执行以下 ionic serve ionic serve 在浏览器里看看现在的页面情况 2....给每个页面添加按钮，在对应的 Controller 里添加功能代码。如在 Login页面里 添加 login 按钮，给它添加功能。
费用跟踪应用采用了Wijmo5和Ionic Framework创建，目的是构建一个hybird app。 我们基于《Mobile first!...现在添加删除开支记录按钮，用于向左滑动出现删除按钮、点击删除可删除开支记录。...默认的，ion-option-button 是隐藏的，当在ion-item内向左滑动，则按钮会可见。这个功能尤其对小屏幕设备非常重要。...这里我们使用了Ionic提供的$ionicActionSheet service服务来实现。...4> 上面的代码，首先使用hgroup元素呈现了开支记录的总和。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
