ionic与angular
ColourfulTiger
这个作者很懒,什么都没留下…
展开
-
ionic3 登录返回实现案例(解决tabs底栏在返回后显示的问题)
在制作登录、注销功能时,很容易出现tabs底栏在注销后仍然显示的问题,查阅很多资料,但是很多信息都是支离破碎的,虽然有人解决了这个问题,但是由于描述不清,大量有用的信息被隐藏在解决办法的背后。经过整理,以及本人亲测成功,将要点整理如下:如果您在看完之后尚未理解,可以见示例部分完整代码:https://download.csdn.net/download/colourfultiger/107...原创 2018-10-14 18:28:56 · 2959 阅读 · 1 评论 -
ionic3 简易公告栏的制作
在制作app的过程中,很容易遇到一种作为分割的公告栏,一栏用作导航,指引该处可以跳转至某一位置,中间栏部分用于显示正文主题内容,这种效果有两种表现形式,具体如下:上面的一栏是头部作为导航栏,指引可以跳转的位置,下面一个是尾部作为导航栏,指引跳转的位置,具体实现代码如下:html部分<!--头部分割--><div class="list-nav no-foote...原创 2018-11-16 16:32:22 · 660 阅读 · 0 评论 -
ionic3中用HttpClient方式进行请求数据
在使用angular时,接触最频繁的是http请求,一、不用考虑请求中含token的情况(1)get方式的请求如下: 先配置headerthis.httpOptions = { headers: new HttpHeaders( { 'Content-Type': 'application/json;charset=UTF-8',...原创 2018-12-15 15:44:02 · 1630 阅读 · 0 评论 -
ionic3 请求跨域问题
这几天一直被一个问题困着,没有跳出坑来,在不断的摸索中终于摸索出来了,问题是处理请求时遇到token过期问题,无法再次访问请求的内容,因为token过期会返回一个401的错误,但是状态码一直接收到的是0,这让人很头疼,但是在network里面查看的状态码仍然是401,于是去查看控制台,发现先打印了这个错误: CORS全称是“跨域资源共享”(Cross-origin resource sh...原创 2018-11-30 15:38:15 · 1446 阅读 · 0 评论 -
ionic3 改编的list效果图
我们经常会看到app有很多列表项,但是不同的列表项有不同的形式,今天就这一常用的形式为例,来制作一个改编的list效果图具体效果如图所示:就是这种有隔断的列表,可以将不同的东西归为一类,但是彼此互补干扰,还能很协调的展示出来。具体的代码如下:html部分 <div class="list-group"> <div class="list-grou...原创 2018-11-15 19:17:01 · 458 阅读 · 0 评论 -
ionic3 输入框获取值的方法
在使用ionic的时候,会发现有些方法和用html来开发还是有一点区别的,在获取input框内的数据方式有2种,具体见一下代码。1、使用#变量名的方式 注意函数的传值,以及参数类型,获取值的语句。 这种方式是HTMLInputElement,故获取到的值不是一个纯粹的值,而是一个输入的对象元素,需要进一步通username.value来获取我们需要的输入框内的内容。...原创 2018-10-22 22:26:29 · 2528 阅读 · 0 评论 -
ionic3 制作九宫格效果
我们在app中常会看到一排类似九宫格形式的图标,它们可以引导我们执行自己需要使用的功能,那么这个清新亮丽的九宫格效果是怎样制作出来的呢?接着往下看吧。代码部分如下:(1)html部分: 采用的方式结合了ionic与html两种,混合开发。<ion-content padding> <div class="row row-wrap"> ...原创 2018-10-29 22:46:13 · 1310 阅读 · 2 评论 -
ionic3 自定义toast样式
文件目录结构:在使用ionic3来写toast效果时,会有各种各样对toast样式的需求,在全局的app.scss中添加以下内容备注:(这里的样式也可以放置在组件的scss文件中,但是是独立开来的,不要嵌套在组件的page-xxx中去)//吐司颜色、大小 .box { width: 200px; -webkit-border-radius: 5px; ...原创 2018-10-14 17:33:22 · 2005 阅读 · 1 评论 -
ionic3 全局变量的定义方法
在编程中少不了会使用到全局变量,今天谈到的是ionic3和angular4配合使用搭建app时用到的全局变量的方式,具体的搭建方法如下:1)直接在app中新建一个config.ts文件 2)在需要使用全局变量的组件中这样引用import {AppConfig} from "../../app/app.config”;在组件中的使用方式:AppConfig.xx;也可以用来...原创 2018-10-29 22:44:44 · 3213 阅读 · 0 评论 -
ionic3 实现拍照与从相册选择功能
参考了很多网上的资料,但是每个人遇到的问题都不一样,我这里出现的问题,可能是node版本,还有插件版本之类的问题,问题以及解决方式可以看这个图。一、插件依赖引入 (1)配置相机在控制行输入命令:ionic cordova plugin add cordova-plugin-cameranpm install --save @ionic-native/camera在ap...原创 2018-10-29 22:36:56 · 1948 阅读 · 0 评论 -
解决ionic3 标题栏ion-title配置居中问题
常见手机app中有很多头部导航栏的文字是居中显示,但是在编辑代码中的时候,会发现都是左对齐的形式,以下是自己总结的方案,实现标题栏居中的效果。 ...原创 2018-10-29 22:43:05 · 1599 阅读 · 0 评论 -
ionic3+angular4组件通信,1组件解决2需求
之前一直想不明白组件的复用性该怎样提高,总觉得一个组件就只能用一次,但经过这几天的折腾,终于开窍了,成功的将一个组件封装成满足2个需求的框框了。先简单介绍一下,这个案例大概是做什么的。本案例是以投票为需求展开的,满足的内容是一个组件不仅要能显示列表所有内容,还能满足搜索功能,能根据某一关键字搜索到具体的人。代码中最主要的是两个部分,一个是子组件封装,还有一个是父组件调用并传递相关信息,具体...原创 2018-11-10 11:46:38 · 805 阅读 · 0 评论 -
ionic3 在build的时候出错
解决方案,找到之前已经安装的插件,先排除是不是插件的原因,然后结合具体情况,删除或者添加插件。在本例中,是因为根据出错文件,并且查到对应的时间与实际时间不符,于是选择了删除之前安装的插件,然后再次build就成功了,删除插件的方式,将安装插件时的add换成remove即可。...原创 2018-11-10 11:32:22 · 578 阅读 · 0 评论