webApp开发一些兼容性的坑 发表于 2018-03-28 | | 阅读次数: 通过做嗨黔东南APP(IOS,Android)这个项目遇到过很多兼容性的坑,写博客记录备份一下,以免再次踩坑。 移动端input处理禁用选择复制带来的问题 大多数在禁用选择复制的问题都是通过user-select: none来处理。代码如下: 1234567891011* { ... 阅读全文 »
搞清楚CSS单位px、em、rem、vh、vw、vmin、vmax 发表于 2018-02-23 | | 阅读次数: 1、px 相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 2、em 相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。看下面例子:HTML:: 1234567<body>body<div class="div ... 阅读全文 »
Vue列表滚动动画 发表于 2018-02-08 | 分类于 Vue | | 阅读次数: 效果图 失帧比较严重,在手机上效果更佳。 原理分析这个滚动页面由两个部分布局(底部固定的Tab页面除外)。一个是顶部的banner轮播,一个是下面的列表。这里的重点是做列表的动画,banner轮播的网上资料很多,请自行查找。 这个动画最重要的是在滚动中实时计算star ... 阅读全文 »
Vue即时聊天(集成极光IM) 发表于 2018-02-06 | 分类于 Vue | | 阅读次数: UI界面 带表情输入框HTML中,input、textarea不太好处理表情、图片的插入。一般有两种处理方案,一是用input来控制输入,再用一个div来控制显示;另外一种就是利用HTML5提供的新属性contenteditable,该属性可以让div或者p等标签变成可输入的的标签,缺点是低版 ... 阅读全文 »
前端代码规范-eslint 发表于 2018-01-25 | | 阅读次数: 前端代码规范-eslint 前言 使用安装本地安装(用到当前项目)1npm install eslint --save-dev 全局安装(用到所有项目。我们强制要求使用,推荐全局安装)1npm install -g eslint 使用vscode编辑器是可以安装eslint插件,它在你写代码的时候 ... 阅读全文 »
Vue实现购物车抛物线动画 发表于 2018-01-09 | 分类于 Vue | | 阅读次数: 前言 抛物线动画应用场景较多,在购物车页面比较常见,那么,怎么来实现这样一个动画? 先看一下Demo图。 实现原理及步骤 动态计算每一个加号到购物车的距离; 123456789101112// 加号到顶部的距离let iconTop = this.$refs.banner.$el.c ... 阅读全文 »
iOS中margin无效 发表于 2017-12-01 | 分类于 Vue | | 阅读次数: 之前在用VUE写微信公众号,用的Mint-UI的Loadmore组件的时候,iOS浏览器中的样式不能正常显示,然后发现不只这一个组件有问题,其他使用margin-bottom全都无效。 然后百度了一下资料:12345关于layoutMarginsiOS8后,UIView 有个属性 var layou ... 阅读全文 »
Vue微信授权 发表于 2017-12-01 | 分类于 Vue | | 阅读次数: 流程图微信网页授权流程。 调用流程 发送授权请求1234567891011121314// 重定向地址、AppId已经Scporeimport { REDIRECT_URI, APP_ID, SCOPE } from '@/api/config'wechatLogin: (url ... 阅读全文 »