赵海辛-CSDN博客

原创 ionic3随笔（一）

首先你需要确保你的电脑安装了node.js，git。。。然后创建一个空文件夹，在文件目录下执行命令（我用的Visual Studio Code，所以这里我直接在IDE里面的终端执行）：npm install -g cordova ionic 安装完如下：然后执行：ionic start myApp tabs 其中myApp是项目名称，tabs是使用的项目模板，然后出现选择的时候，第一个选择

2017-09-14 11:35:50 2035

原创修改input的file控件的样式，但是不修改他本身的属性

最近有好几个朋友问过，这file怎么把未选择文件去掉，或者问，怎么修改选择文件那四个字。。。so，我就写出来喽。当然，我只是说方法，具体你们想长成什么样，你们自己修改即可。。其实，一看就会觉得，搜迪斯奈如此简单。。。代码如下： style> .text{ width: 100px; display: block; border:1px solid red; heigh

2017-07-04 11:10:29 1946

原创 vue2中，根据list的id进入对应的详情页并修改title

一般项目中，我们会遇到有个list。。。然后你随便点击一个，会进入他对应的详情页。。。正常，那个详情页是一个公共的组件，我们只需根据id传值来判断，这个页面显示的是哪个list的数据即可。如图：

2017-06-30 17:46:38 16723 5

原创 vue2项目，前端写请求拦截器和响应式拦截器

很可能进了个假互联网公司，遇到堆假后台，拦截器沦落到前端写。。。import axios from 'axios'import vue from 'vue'import store from './../store/index'axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencode

2017-06-23 16:34:42 4319 2

原创 vue2手机APP项目中，加入开屏广告或者闪屏广告

一般项目里，有的会在启动的时候加开屏广告或者闪屏广告。我们是在index.html通过定位来做的。如下：style media="screen"> #entry { width: 100%; height: 100%; z-index: 200; position: relative; } #entryAdv { display: non

2017-06-21 14:48:21 4603 2

原创 vue2整个项目中，数据请求显示loading图

一般项目中，有时候会要求，你在数据请求的时候显示一张gif图片，然后数据加载完后，消失。这个，一般只需要在封装的axios中写入js事件即可。当然，我们首先需要在app.vue中，加入此图片。如下：template> div id="app"> loading v-show="fetchLoading">loading> router-view>router-view>

2017-06-20 11:00:54 26094 4

原创 Vue2中的省市区三级联动（仿淘宝）

三级联动，随着越来越多的审美，出现了很多种，好多公司都仿着淘宝的三级联动，好看时尚，so我们公司也一样……为了贴代码方便，我把写在data里面省市区的json独立了出来，下载贴进去即可用，链接如下：http://download.csdn.net/detail/zhaohaixin0418/9862255。首先页面显示如下：然后我们县级所在地区会出现三级联动，如下：（以下是片段，背景

2017-06-06 15:14:51 21378 3

原创随笔：vue2项目结构以及优化（着重是路由）

状态不太好，没办法集中精神开发。碰巧总有人问我路由配置以及项目结构问题，所以就来整理一些东西，只是一些随笔，方便自己以后查看。有不足之处，或者您有更好的方案，希望您不吝啬教给我。可留言，可加qq：979976770（非工作日，不上QQ，请勿骚扰，谢谢合作）。一般大都会用vue-cli+webpack来构建项目，我也如此，最初的结构如下图：首先我们需要说的是build，config，st

2017-05-25 13:59:20 6682 6

原创基于vue2写的左滑删除

左滑删除，很多UI框架里有，比如Mint-UI， Muse-UI等，一开始我们就是用的这两个，但是我们需求是要：左滑的时候出现img然后来实现点击删除，如下：因为用UI框架，还得改底层代码= =所以，我们小组就直接写了一个- -，心累……此组件多地方使用，所以建议还是放到common下。。template> div class="left-delete">

2017-05-09 17:27:07 11272 5

原创基于vue2写的上拉加载

因为我们项目中，还用了swiper。。。很多都是滑动切换的，但是又得上拉加载，所以导致，很多UI框架，我们用了，都有不同的bug出现，没办法，最后写了一个。代码如下（这个因为很多地方会用，所以建议放在components/common下面）：template> div class="loadmore"> slot>slot> slot name="b

2017-05-08 11:22:14 10776 5

原创 CSS3自定义滚动条样式

有的公司或许会要求做个好看的滚动条，这时候，我们就需要来自定义滚动条，但是IE跟别的是不一样的。所以，在下面的文章中，会有两种不同的方式来自定义滚动条样式。webkit浏览器css设置滚动条：（下面是他的7个主要的属性）::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的::-webkit-scrollbar-button 滚动条两端的按钮（滚动条轨

2017-04-19 18:50:39 4154

原创 vue2导航根据路由传值，而改变导航内容

在项目中，一般我们的导航都是长的基本一致，只是内容会根据上个页面的内容而改变。那么我们只需要把顶部导航作为独立的公共组件，这样方便哪里需要哪里引入组件即可。公共导航代码如下：（mineHeader.vue）template> section class="listHeader"> section class="header" @click="back()"> src="

2017-04-12 13:45:59 5057 1

原创详讲：vue2+vuex+axios

在vue2项目中，组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的情况下（后台获取数据存入vuex，组件之间共享数据），那么就需要用vuex来管理这些。整个的流程是在组件的created中提交dispatch，然后通过action调用一个封装好的axios然后再触发mutation来提交状态改变state中的数据，然后在组件的计算属性中获取state的数据并渲染在页面上首先新

2017-03-30 17:48:29 23363 9

转载 cookie详解（含vue-cookie）

今天看到一篇cookie的文章，写的特别详细，原文如下：背景在HTTP协议的定义中，采用了一种机制来记录客户端和服务器端交互的信息，这种机制被称为cookie，cookie规范定义了服务器和客户端交互信息的格式、生存期、使用范围、安全性。在JavaScript中可以通过 document.cookie 来读取或设置这些信息。由于 cookie 多用在客户端和服务端之间进行通信，所以除了

2017-03-30 12:00:02 9745

原创 ES6学习随笔--字符串模板、解构赋值、对象、循环、函数、Promise、Generrator

在线编译器：babel、github在nongjs中使用 'use strict' let a = 12;运行node ：node --harmony_destructuring xxx.js代码块：用{}包起来的代码块，比如 if for while 特点：只能在代码块里面使用 var 只有函数作用域，可以重复声明，

2017-03-27 12:00:38 1327

原创 angular2之打包

最近总有人问关于打包的= =有的越打越大= =……然后我只好重新测试打包截图了= =，发给大家，方便帮助需要打包的。项目都完整之后，接下来就是令人头疼的打包问题。第一步在项目根目录下运行ng build（为了方便大家对比，所以先运行此命令），如下：其次在运行ng build --prod --aot，截图如下：这里--prod参数后，angular-cli会把用不到的包都删掉，

2017-02-17 11:10:36 11400 5

看这个之前，你要确保你的教程没错，能跑起来。最近好多人都遇到http请求问题。不知道怎么跟后台接口对接。首先，在我们的英雄指南教程里面，有个模拟的假数据，我们不需要导入他，那么在app.module.ts里面，我们需要把导入的angular-in-memory-web-api注释掉或者删掉，同时需要在下面@NgModule里面的imports:里找到如下代码删掉即可：InMemoryWebApiM

2017-01-17 13:18:50 4960

原创 JQuery手势密码

随着技术的更新，很多人都会头疼，又是手势密码，又是人脸识别= =。。。学海无涯苦作舟啊……手势密码，顾名思义，需要的是canvas的技术，在这里，我把需要用到的js已经上传到资源里面：http://download.csdn.net/detail/zhaohaixin0418/9738860，下载，引入页面。然后在页面写如下即可：（可根据项目需求去改js代码，正确的密码是一个字母“Z”）d

2017-01-16 15:45:50 1801

原创详讲H5、WebApp项目中常见的坑以及注意事项

首先我们中会有一些常用的meta标签，如下：防止手机中网页放大和缩小--> meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />备注：width 设置viewport宽度，为一个正整数，或字符串‘device-w

2017-01-13 16:54:55 20490

原创纯css3写长方体上下旋转滚动

今天老大让弄个动画- -弄好后，发现兼容不了安卓4.0版本= =不过，可以分享出来给大家看下。。。还蛮好玩的。。。这个动画特效需要注意的是，我弄的是4个面的，如果你想要6个面的长方体的话，你需要调translatez轴的像数。。（150px）即可。body{ transform-style:preserve-3d; -webkit-transform-style

2017-01-09 11:15:22 1826

原创用js写倒计时

写倒计时，首先我们需要想到的是要设定时间和获取当前时间，然后两者相减就可以。但是这里需要注意的是天、时、分、秒的换算，时分秒为单数时，前面要加零占位。方法一：body> div id="times_wrap" class="time_num"> p>距离结束时间：p> div class="time_w"> b id="times

2016-12-28 16:53:08 559

原创 angular2-英雄指南教程（详讲小白上手会遇到的坑）

首先给大家说一下ng2的官网：https://www.angular.io（这是需要翻墙的，不然看不了）。中文官网：https://www.angular.cn（里面有英雄指南教程），大家可以跟着教程一步一步来，当然，在做英雄指南教程之前，还是先搭环境，node是基本的，然后在中文官网https://www.angular.cn/docs/ts/latest/guide/setup.html，运行

2016-12-21 14:37:49 5103 2

原创 angular中实现li或者某个元素点击变色

先说一种最直接了当的不需要js控制，方法一：直接在用ng-class就可以控制：p ng-click="state=1;" ng-class="{active:state==1}">浮伤年华p>p ng-click="state=2;" ng-class="{active:state==2}">忧伤说笑p>在style里面设置如下：style type="text/css

2016-12-13 14:40:47 6970 2

原创 angular中如何实现上拉无限加载

昨天差点被这个上拉无限加载搞死= =，现在终于弄好了……希望能帮到需要的人。这里我们需要ng-infinite-scroll.js，我的博客有免费的下载资源：http://download.csdn.net/detail/zhaohaixin0418/9693690，下载完记得给个评分哦。下载好后，我们开始写页面代码，首先引用你的ng项目所要引用到的所有js和css。html ng-a

2016-11-25 16:42:25 2722 1

原创详讲H5-拖放（原生js将图片拖放另外一个元素里）

今天，一个朋友让我帮他写个H5拖放图片的事件，所以就把这些知识又重新回忆了一遍。趁着现在还熟练，写出来跟大家分享首先，给大家列个目录，方便不懂的小白能看懂。（ps：这里是先引导大家，告诉大家一些原理，对象，方法。结尾会附完整的js，只要你们直接复制就可以在浏览器看结果。大家也可以根据这个自己写个拼图游戏玩哦，很简单的）1：什么是拖放？1：拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

2016-11-18 14:52:28 5930 3

原创关于Windows和Mac系统，node.js如何升级

最近研究ng2，懂ng2的肯定都知道，他要求node版本在5以上，npm的版本在3以上。所以，得先升级node。但是这里需要注意的是，Windows和Mac是不一样的。首先我们可以通过cmd查看当前你所使用的node版本：指令如下：node -v查看node版本，npm -v查看npm版本。Windows：需要安装最新的msi。下载地址：https://nodejs.org/en/down

2016-11-17 16:51:19 4193

原创 angularJS之项目知识

（PS：angular项目中所要用到的所有js文件下载地址：http://download.csdn.net/download/zhaohaixin0418/9672039） WEB项目中“单页应用”和“多页应用“的区别：多页应用与单页应用（SPA）多页应用：一个项目中有多个完整的.html页面单页应用：只有一个.html是完整的（缺少body主体），其它.html都是

2016-11-03 15:11:33 519

原创 AngularJS入门之如何快速上手续集（详细讲解什么是angular）

这里是angular的基础入门，可以让初学者很快上手，记得要引用它的js文件之前先引用jquery……项目用angular的，可以加好友，一起沟通交流。目前ng2正在学习中，ng1的话项目都用过了……

2016-11-03 10:40:14 1004

原创 AngularJS入门之如何快速上手（详细讲解什么是angular）

接触angular久了越来越发现他就是个霸气的男友，功能如此强大，相比react，ng就好像是个高大威猛的男人，react好像就是个娇小的妹子= =。。。当然，或许是我react太烂了把……进入正题，详细讲解下什么是angular（初学的小白，可以一步一步跟着我的内容来学，相信你会很快能上手，这里只是一个入门）。

2016-11-02 16:16:41 4021

原创 html5-canvas（多模式彩色贪吃蛇）

#mycanvas{ border:1px solid green; float: left; } #d1{ width: 110px; height: 100px; border: 1px solid purple;

2016-10-31 17:22:50 1086 2

原创 html5-canvas（简单贪吃蛇）

这只是最基本的canvas操作而已，做了一条彩色的贪吃蛇……我想所有前端工作者，canvas基本用不到吧= =（当然，或许是我从来不用），时间久了，都怕荒废掉，所以写一个来回忆回忆canvas，明天会更新一款分简单-中等-困难级别的分享给大家。ps：希望认识更多喜欢研究新技术或者一些好玩的特效的程序员，共同进步，不要嫌弃俺是一枚菜鸟就行#99。

2016-10-26 11:52:14 574