馨曦缺的博客_ionic

ionic2轮播图实现，以及在轮播图上加搜索框或者标题

先看代码：正常情况下用ngFor循环出每一项。eg：注释部分[pager]="true"显示底部轮播顺序的小圆点，[loop]=“true” 循环播放 autoplay="3000”每隔几秒播放一张class="slides"> class="slide" [pager]="true" [loop]="true" autoplay="3000" > --

ide

绝对定位

参考文档

css

搜索

原创 2021-11-19 10:43:02 334 阅读

ionic2中ion-segment用法

segment是一组按钮，有时称为分段控件，允许用户与许多控件的紧凑组进行交互。分段提供与标签相似的功能，选择一个将取消选择所有其他选项。当您希望让用户在应用程序的不同页面之间来回移动时，应使用选项卡栏而不是分段控件。您可以使用Angular的ngModel或FormBuilder API。效果看图看代码：<ion-header...

ios

ico

不透明度

表单

分段控件

原创 2021-11-19 10:43:02 103 阅读

ionic2中ion-slides轮播图报错Uncaught TypeError: Cannot read property 'hasAttribute' of undefined

在使用ionic2的轮播图时会报错：Uncaught TypeError: Cannot read property 'hasAttribute' of undefined at autoplay (swiper.js:175) at startAutoplay (swiper.js:218) at initSwiper (swiper.js:164)

ide

数组

加载

解决方法

轮播图

原创 2021-11-19 10:43:00 151 阅读

ionic中AlertController设置

AlertController警报是一个对话框，向用户显示信息或使用输入收

处理程序

复选框

自定义样式

css

异步加载

原创 2021-11-19 10:42:05 318 阅读

ionic生成二维码和普通页面生成二维码js

两种情况下生成二维码一致。只是在引入二维码js的时候不太一样思路：1.引入qrcode.js（下载地址http://davidshimjs.github.io/qrcodejs/）2.获取需要生成二维码的DOM节点3.在获取到的节点上设置二维码显示的大小等信息4.获取生成二维码所需的数据（也就是把什么数据生成二维码）5.生成二维码1.ionic项目中生成二维码：

生成二维码

jquery

二维码

数据

调用函数

原创 2021-11-19 10:41:49 640 阅读

ion-input在ionic中的input，带label的带icon的输入框

1.概述ion-input is meant for text type inputs only, such as text, password, email, number,search, tel, and url. Ionic仍然使用组件中的一个实际的 HTML元素，但是，通过Ionic包装本机HTML输入元素，它能够更好地处理用户体验和交互性。不用于非文本输入，例如复选框，收

ico

输入框

3d

html

高亮

原创 2021-11-19 10:41:47 820 阅读

ion-item用法收集

ion-list-header,ion-item,[ion-item],ion-item-divider一个item可以包含文本，图像和其他任何东西。通常它被放置在列表中，其他item。它可以轻松刷新，删除，重新排序，编辑等等。只有在需要通过手势操作item时，才需要将item放在列表中。它需要一个ItemSliding包装器元素才能被刷新。有几个元素被认为是项目，

ide

ico

hive

a标签

分隔符

原创 2021-11-19 10:41:46 356 阅读

ionic2下拉刷新和上拉加载功能实现

先看代码： *ngFor="let i of items">{{i}}(ionInfinite)="doInfinite($event)"> <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="加载更多。。。。"> .ts:

数据

i++

无限滚动

下拉刷新

上拉加载

原创 2021-11-19 10:41:45 145 阅读

ionic中的ToastController小弹窗用法。提示信息。toast长时间不消失解决方案

学习笔记：有理解有翻译ToastController1.Toast 是现代应用中常用的微妙通知。它可用

关闭按钮

封装

ide

提示框

指定位置

原创 2021-11-19 10:39:37 658 阅读

ionic中ion-multi-picker报错Cannot find module 'ion-multi-picker'.以及ion-multi-picker用法

解决办法：在引用方法没有错误的情况下：原因是没有安装：ion-multi-picker只要安装即可：npm install ion-multi-picker

html

初始化

懒加载

数组

选择器

原创 2021-11-19 10:38:39 214 阅读

ionic2中实现上拉菜单并且修改默认样式也就是自定义样式。ActionSheets。以更换/上传头像为例.

学习笔记有参考，有翻译，有自己的感悟先看实例代码：步骤：1.在ts文件中引入组件：import { ActionSheetController } from 'ionic-angular';2.在construct构造函数中声明注入： constructor(public navCtrl: NavController,public actionSheetCtrl:

css

ico

操作表

数组

处理程序

原创 2021-11-19 10:38:38 153 阅读

ionic上传身份证正反面照片、上传图片、FileReader使用

项目笔记：有借鉴有自己的理解。思路：上传图片首先需要获取到显示图片的div的DOM节点，然后监听input的值，当input的值发生变化的时候，就将input的这个值插进div里面显示。1.获取背景图的Dom节点2.获取input的DOM节点3.判断浏览器是否支持FileReader。不支持就是返回提示，支持就监听input的DOM节点。当发生改变change的时候调用读取图片

读取文件

javascript

文件读取

html

数据

原创 2021-11-19 10:38:37 649 阅读

ionic2中 NavController导航组件用法方法关于页面的导航

1.NavController概述 NavController是导航控制器组件的基类，如Nav和Tab。您可以使用导航控制器导航到应用程序中的页面。在基本级别，导航控制器是表示特定历史（例如，Tab）的页面的数组。可以通过按压和弹出页面或在历史记录中的任意位置插入和删除这些数组来操纵整个应用程序。当前页面是数组中的最后一个页面，或者堆栈的顶部，如果我们想到这样

堆栈

视图控制器

推送

应用程序

数组

原创 2021-11-19 10:35:54 170 阅读

ionic2中使用自定义字体图标/iconfont自定义字体图标

使用自定义字体图标的开始是一样的都是在字体图标库生成需要用到的字体图标。步骤如下:以上我选择过前两个都可以实现（Unicode/Font class都可以）接下来的两种引用方式：不管是哪种引用方式，CSS样式修改后均放在引用的地方的scss页面内，比如tab页面引用的图标就放Tab页面的SCSS里面，或者直接放在app.scss里面。跟组件的scss样式里面也就是1.直接引用：

css

ico

ios

chrome

firefox

原创 2021-11-19 10:35:52 289 阅读

ionic中Node Sass does not yet support your current environment解决办法Node sass安装

1.npm uninstall --save node-sass npm install --save node-sass 如果还是不行就执行：npm cache clean 再执行2：npm install --save node-sass 最后还是不行就给全局设置代理，给Npm设置代理，还是不行就干掉npm重装

全局设置

其他

原创 2021-11-19 10:35:52 178 阅读

ionic报错：can not find module crypto-js解决方案

解决方案：1.安装typings: npm install -g typings2.用typings去寻找crypto-js: typings search crypto-js3.安装crypto-js: typings install dt~crypto-js --save

解决方案

其他

原创 2021-11-19 10:35:51 1788 阅读

ionic3新特性懒加载，lazyloading

ionic2结合angular开发成为了前端开发的一段神奇，组件化的开发

字符串

类名

懒加载

ide

第一次启动

原创 2021-11-19 10:34:34 314 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

12369999

ionic2轮播图实现，以及在轮播图上加搜索框或者标题

ionic2中ion-segment用法

ionic2中ion-slides轮播图报错Uncaught TypeError: Cannot read property 'hasAttribute' of undefined

ionic中AlertController设置

ionic生成二维码和普通页面生成二维码js

ion-input在ionic中的input，带label的带icon的输入框

ion-item用法收集

ionic2下拉刷新和上拉加载功能实现

ionic中的ToastController小弹窗用法。提示信息。toast长时间不消失解决方案

ionic中ion-multi-picker报错Cannot find module 'ion-multi-picker'.以及ion-multi-picker用法

ionic2中实现上拉菜单并且修改默认样式也就是自定义样式。ActionSheets。以更换/上传头像为例.

ionic上传身份证正反面照片、上传图片、FileReader使用

ionic2中 NavController导航组件用法方法关于页面的导航

ionic2中使用自定义字体图标/iconfont自定义字体图标

ionic中Node Sass does not yet support your current environment解决办法Node sass安装

ionic报错：can not find module crypto-js解决方案

ionic3新特性懒加载，lazyloading