angular2+onsenui框架
关注
分享
扫一扫
Ariel_ckr
不会炒股的前端不是好的产品经理。
展开
-
angular2--js如何将分开的两个数组合并为一个数组
如下，是两个分开的数组，但是有时候根据需要我们想把它们合并在一起，要怎么操作呢？其实实现起来很简单，就是嵌套循环的机制：假设以上数组为arr:newArr:any=[];for(let i=0;i<arr.length;i++){ for(let j=0;j<arr[i].length;j++){ this.newArr.push(arr[i][j]) }}简简...原创 2018-12-29 10:01:17 · 2572 阅读 · 0 评论 -
angular2--怎么在angular2框架内使用iframe嵌入一个抽奖大转盘
实现效果如下：我想在angular2框架内实现一个抽奖转盘的效果，在源码库里下载到的代码基本都是使用jquery框架和js技术的，和angular2使用的ts不符合，很难改动。那么能不能使用html+js实现这个页面，再把它嵌入到ng2里面呢？答案是可以的。1、把实现了的大转盘抽奖页面（如turntable）整个文件夹放到ng2的assets文件夹下，turntable里面的文件不用改动...原创 2019-05-24 15:13:31 · 1122 阅读 · 0 评论 -
angular2--引入插件cordova-plugin-qrscanner实现扫一扫功能
具体实现效果如下所示：1、在cordova打包功能添加插件cordova plugin add cordova-plugin-qrscanner2、在typings.d.ts中定义插件declare var QRScanner: any ;下面就可以实现代码啦~一、html前端显示配合onsenui框架进行页面开发：<ons-page> <ons-tool...原创 2019-05-21 10:56:52 · 1384 阅读 · 2 评论 -
angular2--使用qrcode生成二维码
1、在项目根目录安装依赖npm install --save qrcode2、在typings.d.ts文件里定义变量declare var QRCode: any ;3、html<!--二维码 S--><div class="code-img"> <div id="qrcode"></div></div><...原创 2019-05-21 12:21:32 · 2156 阅读 · 0 评论 -
angular2--使用JsBarcode生成条形码
1、下载js文件JsBarcode.all.min.js2、在angular.json文件里引入js3、在typings.d.ts文件里定义变量declare var JsBarcode: any ;4、html<!--条形码 S--><div class="code-top"> <img id="imgcode" /></div...原创 2019-05-21 15:09:28 · 1483 阅读 · 0 评论 -
angular2--使用iosSelect实现选择出生年月日的三级联动
实现效果如下所示：官方文档：http://zhoushengfe.com/iosselect/website/index.html1、使用npmnpm install iosselect2、下载相关文件下载文件到项目目录中，在angular.json中引入css和js文件，路径按需调整。3、在typings.d.ts定义变量declare var IosSelect: any...原创 2019-05-22 16:01:37 · 771 阅读 · 0 评论 -
angular2--怎么删除数组中的某个元素
Array.prototype.indexOf = function (val) { for (var i = 0; i < this.length; i++) { if (this[i] == val) return i; } return -1;};Array.prototype.remove = function (val) { v...原创 2019-01-09 17:07:01 · 5812 阅读 · 0 评论 -
angular2--实现类似大众点评的左右分类栏目效果
一、主要实现效果如下显示1、左边为侧栏导航，右边为对应左边分类的子菜单列表。2、左边菜单点击时，右边的对应的子菜单就会滚到页面的顶部；同理，右边的子菜单滚动时，左边的侧栏导航也会去到对应的分类处。二、页面实现 html<div class="content" #content (scroll)="scrollFn($event)"> <!--左边导航栏 S-->...原创 2019-05-31 12:06:27 · 626 阅读 · 0 评论 -
angular2--cordova设置禁止ios和Android横屏
在cordova工程下的config.xml文件里配置：<preference name="orientation" value="portrait" />原创 2019-06-25 21:01:16 · 396 阅读 · 0 评论 -
angular2--cordova禁止ios底部向上滑动
在cordova工程下的config.xml文件里配置：<preference name="WebViewBounce" value="false" /><preference name="DisallowOverscroll" value="true" />原创 2019-06-25 21:06:36 · 602 阅读 · 0 评论 -
angular2--cordova解决ios的app界面状态栏和页面重叠问题
方法一：cordova工程打包文件里的../Classes/MainViewController.m，修改viewWillAppear方法：- (void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; if (HEIGHT==812.0 || HEIGHT==896.0) { ...原创 2019-06-25 21:24:24 · 769 阅读 · 0 评论 -
angular2--input框实现密码眼睛切换
一、html<ons-page> <ons-toolbar></ons-toolbar> <div class="background"></div> <div class="content"> <div class="r-psw-cnt"> <!--input框类型和眼睛的路径都存为变量-...原创 2019-08-31 10:46:29 · 640 阅读 · 0 评论 -
angular2--下拉更新和上拉加载更多
效果如下：（1）页面往下拉做刷新页面操作（2）页面往上滑到底部时，加载更多数据## 标题html<ons-page> <ons-toolbar> <div class="left"></div> <div class="center">上拉加载下拉更新</div> <div class="righ...原创 2019-09-01 17:04:35 · 736 阅读 · 0 评论 -
angular2+onsenui--怎么在angular2项目里引入onsenui框架
在angular2项目里安装onsenui框架，这里使用npm命令。一、在目录下，shift+鼠标右键–在此处打开命令窗口键入命令：npm install onsenui ngx-onsenui --save安装成功后会显示相应的框架版本号二、修改app.module.ts增加如图所示的红色框部分：import { OnsenModule, CUSTOM_ELEMENTS_SC...原创 2019-03-28 17:34:54 · 616 阅读 · 1 评论 -
cordova--启动第三方地图app
一、需要安装的插件（1）cordova plugin add com.lampa.startapp //通过URI接口打开第三方APP并跳转到该url（2）cordova plugin add cordova-plugin-appavailability --save //检测是否安装第三方App（3）cordova plugin add cordova-plugin-inappbrows...原创 2019-03-07 11:47:10 · 1040 阅读 · 0 评论 -
angular2--怎么实现城市列表选择功能，类似于通信录功能
实现效果如下：一、右侧有26个字母，用户点击字母的时候，列表会跳到对应字母的城市区域二、页面滑动的时候，经过的城市区域，在右侧字母列表处有高亮提示三、用户选择一个城市的时候，选择的城市信息会显示在头部==》当前城市位置代码实现步骤：一、在头部定义一个盒子，用于接收用户选择的城市<div class="city-box"> <div class="city-hea...原创 2019-03-06 20:41:53 · 908 阅读 · 0 评论 -
angular2--前端页面兼容富文本html标签
请求接口时返回一个content字段，里面包含html标签如果我把content内容直接放到html页面，页面不能兼容：&amp;amp;lt;p&amp;amp;gt;{{Object.content}}&amp;amp;lt;/p&amp;amp;gt; //此处的Object为用户自己把以上数据存储到的一个对象，可自定义解决办法：&amp;amp;lt;p id=&amp;quot;n原创 2018-12-27 15:20:37 · 1197 阅读 · 0 评论 -
angular2--不同页面间发起通知 sfnBroadCast
例如：当我退出登录的时候，需要通知用户中心一、在需要发起通知的页面：1、引入import { EventServices } from '../../../services/event.services';2、在构造函数中加入：constructor(private eventBus: EventServices）{}3、点击退出的时候，发起通知let param = { ev...原创 2018-12-26 16:59:10 · 577 阅读 · 0 评论 -
angular2--安装和使用
一、跳转事件html：&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;div (click)=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;goPage('prevPage')&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&原创 2018-12-13 12:14:11 · 2963 阅读 · 0 评论 -
angular2--常用标签[(ngModel)]、*ngFor、*ngIf等等
常用标签一、跳转事件html：&amp;amp;lt;div (click)=&amp;quot;goPage('prevPage')&amp;quot;&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt; //跳转到上一页&amp;amp;lt;div (click)=&amp;quot;goPage('nextPage')&原创 2018-12-20 10:33:09 · 1853 阅读 · 1 评论 -
angular2--前端对接接口方法
angular2前端对接接口方法1、需要将谷歌浏览器设置跨域https://www.cnblogs.com/cshi/p/5660039.html2、在 \src\services\httpService.ts中创建接口路径：post 方法：public UserRegister(params:any):Promise&lt;any&gt;{ return this.http....原创 2018-12-20 10:34:43 · 3663 阅读 · 1 评论 -
angular2--input框验证手机号，只能输入数字并且不能超过11位数
效果如下：htmlmaxlength为限制输入框输入的最长长度，因为我这里对input做了一些空格加入，所以变成13，要是你们不做分隔，写11就行&amp;lt;input type=&quot;text&quot; id=&quot;name&quot; maxlength=&quot;13&quot; placeholder=&quot;请输入手机号码&原创 2018-12-20 11:06:58 · 5053 阅读 · 0 评论 -
angular2+onsenui--监听input框输入，input的值不为空时，提交按钮激活
XXX.htmlinput框使用有两个事件：keyup【获取输入框的值】和keypress【验证是否为数字】按钮的效果变化有两个属性绑定：//动态给按钮增加样式 --按钮无效时为灰色 --active激活时为黄色 [ngClass]=&amp;amp;quot;{'active':isCode==true}&amp;amp;quot;//给按钮添加是否点击判断[disabled]=&amp;amp;quot;codeDisabled&a原创 2018-12-26 10:32:42 · 1737 阅读 · 1 评论 -
angular2--input框输入数字不换行
今天在做项目的时候发现一个很神奇的问题，就是我input框输入的内容，要是中文就可以正常的在div容器里自动换行，但是输入数字的话就不行。解决办法：在包裹的容器外面加上word-wrap: break-word;overflow: hidden;...原创 2019-01-14 20:18:21 · 779 阅读 · 0 评论 -
angular2--怎么实现多选功能
实现效果如下，实现多选和取消的功能：这里我定义一个数组为labelLists，用来存放上面列举的标签，数据格式如下，其中isSelect为标识该标签是否已选：html:html页面使用*ngFor来循环遍历数组；[ngClass]为动态添加一个点击后的active样式，判断条件为当前点击的标签的isSelect属性为true；(click)事件就来做具体的点击效果切换。<ul&g...原创 2019-01-09 16:39:41 · 1110 阅读 · 0 评论 -
怎么使用cordova命令打包android APP【debug版本】【带签名版本】
一、创建cordova项目（1）在文件夹目录D:\test\【此路径可自定义】下，shift+鼠标右键==&amp;amp;gt;在此处打开命令窗口输入：cordova create test com.cordova.test test （创建cordova工程 &amp;amp;lt;文件夹名&amp;amp;gt; &amp;amp;lt;包名&amp;amp;gt; &amp;amp;lt;app名原创 2019-02-15 12:34:10 · 2097 阅读 · 1 评论 -
angular2--怎么利用经纬度获取两地的实际距离
参考百度api开发平台：http://lbsyun.baidu.com/jsdemo.htm#i5_5它是这么写的，然后我现在要改一下，换成拿到了两地的经纬度，计算实际距离，基于typescript开发。一、首先你需要去百度开发平台去申请一个秘钥 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2....原创 2019-02-22 15:20:32 · 564 阅读 · 0 评论 -
angular2--如何搭建cordova环境
参考链接：https://www.cnblogs.com/woodk/p/5213916.html原创 2019-03-05 14:50:15 · 584 阅读 · 5 评论 -
angular2--实现星星评分功能，可点击可传值
实现效果如下一开始给星星赋值变量为3，所以初始化时，有3颗星星被点亮；后面进行点击操作的时候，就根据点击的位置星星就会变亮啦~~html<div class="stars"> <img [src]="pic.flag == 0 ? pic.grayStar: pic.yellowStar" alt="" *ngFor="let pic of lists; let i =...原创 2019-09-01 17:59:10 · 605 阅读 · 1 评论