• 等级
  • 42035 访问
  • 68 原创
  • 0 转发
  • 57099 排名
  • 4 评论
  • 7 获赞

ionic3+angular4组件通信,1组件解决2需求

之前一直想不明白组件的复用性该怎样提高,总觉得一个组件就只能用一次,但经过这几天的折腾,终于开窍了,成功的将一个组件封装成满足2个需求的框框了。 先简单介绍一下,这个案例大概是做什么的。本案例是以投票为需求展开的,满足的内容是一个组件不仅要能显示列表所有内容,还能满足搜索功能,能根据某一关键字搜索到具体的人。 代码中最主要的是两个部分,一个是子组件封装,还有一个是父组件调用并传递相关信息,具体...

2018-11-10 11:46:38

ionic3 在build的时候出错

解决方案,找到之前已经安装的插件,先排除是不是插件的原因,然后结合具体情况,删除或者添加插件。 在本例中,是因为根据出错文件,并且查到对应的时间与实际时间不符,于是选择了删除之前安装的插件,然后再次build就成功了,删除插件的方式,将安装插件时的add换成remove即可。 ...

2018-11-10 11:32:22

ionic3 制作九宫格效果

我们在app中常会看到一排类似九宫格形式的图标,它们可以引导我们执行自己需要使用的功能,那么这个清新亮丽的九宫格效果是怎样制作出来的呢?接着往下看吧。 代码部分如下: (1)html部分:         采用的方式结合了ionic与html两种,混合开发。 <ion-content padding> <div class="row row-wrap"> ...

2018-10-29 22:46:13

ionic3 全局变量的定义方法

在编程中少不了会使用到全局变量,今天谈到的是ionic3和angular4配合使用搭建app时用到的全局变量的方式,具体的搭建方法如下: 1)直接在app中新建一个config.ts文件    2)在需要使用全局变量的组件中这样引用 import {AppConfig} from "../../app/app.config”; 在组件中的使用方式:AppConfig.xx;也可以用来...

2018-10-29 22:44:44

解决ionic3 标题栏ion-title配置居中问题

常见手机app中有很多头部导航栏的文字是居中显示,但是在编辑代码中的时候,会发现都是左对齐的形式,以下是自己总结的方案,实现标题栏居中的效果。   ...

2018-10-29 22:43:05

ionic3 实现拍照与从相册选择功能

参考了很多网上的资料,但是每个人遇到的问题都不一样,我这里出现的问题,可能是node版本,还有插件版本之类的问题,问题以及解决方式可以看这个图。 一、插件依赖引入  (1)配置相机 在控制行输入命令: ionic cordova plugin add cordova-plugin-camera npm install --save @ionic-native/camera 在ap...

2018-10-29 22:36:56

ionic3 输入框获取值的方法

在使用ionic的时候,会发现有些方法和用html来开发还是有一点区别的,在获取input框内的数据方式有2种,具体见一下代码。 1、使用#变量名的方式      注意函数的传值,以及参数类型,获取值的语句。     这种方式是HTMLInputElement,故获取到的值不是一个纯粹的值,而是一个输入的对象元素,需要进一步通username.value 来获取我们需要的输入框内的内容。 ...

2018-10-22 22:26:29

ionic3 登录返回实现案例(解决tabs底栏在返回后显示的问题)

在制作登录、注销功能时,很容易出现tabs底栏在注销后仍然显示的问题,查阅很多资料,但是很多信息都是支离破碎的,虽然有人解决了这个问题,但是由于描述不清,大量有用的信息被隐藏在解决办法的背后。 经过整理,以及本人亲测成功,将要点整理如下: 如果您在看完之后尚未理解,可以见示例部分完整代码:https://download.csdn.net/download/colourfultiger/107...

2018-10-14 18:28:56

ionic3 自定义toast样式

文件目录结构: 在使用ionic3来写toast效果时,会有各种各样对toast样式的需求, 在全局的app.scss中添加以下内容 备注:(这里的样式也可以放置在组件的scss文件中,但是是独立开来的,不要嵌套在组件的page-xxx中去) //吐司颜色、大小 .box { width: 200px; -webkit-border-radius: 5px; ...

2018-10-14 17:33:22

vuex环境搭建及小案例

1、在项目下安装vuex:npm install vuex --save-dev 2、在main.js中注册vuex: import Vuex from 'vuex' //注册vuex import store from './vuex/store' //某一值的初始状态及改变方法 new Vue({ el: '#app', router, store...

2018-10-14 17:31:59

mac下配置环境变量

直接在终端输入: open .bash_profile   配置sdk、jdk export ANDROID_HOME=sdk的本地位置 export ANDROID_TOOLS=$ANDROID_HOME/tools export ANDROID_PLATFORM_TOOLS=$ANDROID_HOME/platform-tools export PATH=$PATH:$ANDROID_...

2018-10-14 17:28:23

vue+定时器 自动变化的进度条

  一、定时器的写法:(本例运用的是setInterval) (1)对定时器使用的基本理解   定时器名 = setInterval(“要执行的函数名”,定时时间毫秒); //定时器 clearInterval(“定时器名”); //取消定时器 (2)本例中应用的模式 var id=setInterval(()=>...

2018-10-01 19:36:22

vue自定义进度条的制作方法(含css属性值的两种动态改变方式)

雏形部分接上一篇文章:https://blog.csdn.net/ColourfulTiger/article/details/82910505 结合vue制作自定义的进度条,优势在于采用了vue特有的样式绑定,与双向绑定的方法,达到数据与进度条的进度一致。 突破点:通过变量来动态改变属性对应的属性值。 知识点补充:                   (1)看了一些文章采用动态的改变值的...

2018-09-30 17:47:27

vue 中引用字体图标的方式

1、全局安装font-awesome cnpm install font-awesome --save-dev 2、main.js中引入      import 'font-awesome/css/font-awesome.min.css' 3、在相关文件中使用 <i class="fa fa-motorcycle" aria-hidden="true"></i>...

2018-09-30 16:18:17

进度条制作

简单描述一下小例子: 这个进度条是可以通过js控制的,即点击按钮触发函数,动态的改变百分比的值与进度条的状态。当超过100%时,不再响应,按钮禁用。 html部分: <div class="progress-bar"> <div class='box'> <div class='clip' id="context"> ...

2018-09-30 16:06:14

textarea高度自适应函数

在实现textarea根据内容的增多实现高度自适应,且无滚动条的效果,方法有2种。 第一种方法:通过事件onkeyup来实现这样的效果 备注:onkeyup事件发生阶段           1、onkeyup事件会在键盘按键被松开时发生;           2、与onkeyup事件相关的事件发生次序:                 1)onkeydown----------键盘按下-...

2018-09-24 13:51:37

前端页面试题答题区遇到()实现换行的方式

  在一些题库系统中,很容易遇到分条作答的现象,当大量的答案都只通过一段话显示在一起的时候,很难让人分清楚条理,关键字也不明显,很容易出现错判断的现象,而通过括号大段的在一起也很难看,那么怎样才能实现分条作答的页面呢? 思路如下: 1、给出规范,如遇到()代表答案内容中的一条; 2、推测特殊情况,考虑细节,当给出的1中情况出现其他特殊情况时,该怎样解决,使用正则表达式判断; 3、仿编译原...

2018-09-23 22:35:04

父组件操作子组件的方式

1、子组件 <template> <div class=""> {{form}} </div> </template> <script> export default { props:['form'], data () { return { msg: 'layout' } } } &lt..

2018-09-23 22:23:59

js的回调函数使用

源码见地址:https://download.csdn.net/download/colourfultiger/10673643 html部分 <div class="box"> <div id="callback1"></div> <button onclick="testback1(forfun)">ca

2018-09-18 12:41:49

css动画遮罩效果自上而下与自下而上

基本结构 <div class="header"> <div class="inner"> <a href="#">标题栏</a> </div> </div> 1、自上而下 scss:被注释的部分是另外一种自下而上的情况。 .header { w

2018-09-07 12:40:19

ColourfulTiger

体验,让生活更充实!
关注
  • 移动与手机应用/web工程师
  • 中国 湖北省 武汉市
奖章
  • 持之以恒