由于现在手机都是"高密度屏幕", 我们写的1px到了手机上会用2/3个物理像素点去显示, 这样1px边框看起来就会比较粗, 所以如果你也觉得自己的1px边框比较粗, 那么请往下看.

源码: [链接] 常见应用场景 现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在. 带边框, 常用在"功能导航"页面 无边框, 常用在首页分类 设计目标 在scss环境下, 通过mixin实现n宫格, 并且可以支持"有无边框"和"每个格是否正方形": {代码...} 最终效果 "padding百分比"小技巧 先解释一个小技巧, 如...

往期目录 第一课, 体验typescript 第二课, 基础类型和入门高级类型 第三课, 什么是泛型? 第四课, 解读高级类型 第五课, 什么是命名空间(namespace)? 什么时候要用命名空间? 如果你发现自己写的功能(函数/类/接口等...)越来越多, 你想对他们进行分组管理就可以用命名空间, 下面先用"类"举例: {代码...} 仔细看你会发现nam...

但是人家说头高度是padding撑起的没有具体高度, 好吧看来只能用flex-flow:column了.简单说下flex-flow:column, 默认flex都是x轴布局, 声明为column后就变成y轴布局, 这样就可以借助flex自动填充剩余的特性占满高度:

小程序文档上说 目前支持的选择器有： 选择器 样例 样例描述 .class .intro 选择所有拥有 class="intro" 的组件 #id #firstname 选择拥有 id="firstname" 的组件 element view 选择所有 view 组件 element, element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件 ::after view::after 在 view 组件后...

本文一个尝鲜的体验分享, 并没有太复杂的技巧, 做了一个最少代码的例子展示, 让每个人都可以把action用起来, 如果路过的大牛有高级技巧请留言分享, 我会补充. 下面正文开始.

你要的正则都在这! 😃 正则大全vscode版本, 查证则再也不用"百度"了. 😃 vscode中搜索"any-rule"进行安装. 仓库地址: [链接] 使用方法 安装vscode中插件搜索框输入any-rule 安装完毕后按F1(或者ctrl+shift+p). 输入"zz"可以看到正则列表. 或者输入关键词, 比如"手机". 网页版 如果刚巧你不是vscode用户, 我们还给你准备了...

直达 第一课, 体验typescript 第二课, 基础类型和入门高级类型 第三课, 泛型 第四课, 解读高级类型 第五课, 什么是命名空间(namespace)? 回顾 第二课的时候为了更好的讲解基础类型, 所以我们讲解了一部分高级类型, 比如"接口( interface )" / "联合类型( | )" / "交叉类型( & )", 本节课我会把剩余高级类型都讲完. ...

web常用的loading图标有2种, 一种是ios的"菊花", 一种是android的"环". 今天我们用svg实现android的"环"动画, 下节课实现ios的"菊花".注意: gif帧数少的原因, 实际动画效果是很平滑的.

其实vue/react等框架的出现, 让自己做一个ui变得简单, 大部分的js逻辑都被库封装, 反而组件的代码主要都是css, 所以只要css写好了, 一个组件就完成60%以上了.

往期 第一课, 体验typescript 第二课, 基础类型和入门高级类型 第三课, 什么是泛型? 第四课, 解读高级类型 第五课, 什么是命名空间(namespace)? 插一课 本来打算接着上节课, 把高级类型都讲完, 但是写着写着我发现高级类型中, 有很多地方都需要泛型的知识, 那么先插一节泛型. 什么是"类型变量"和"泛型" 变量的概念我们都...

导航 第一课, 体验typescript 第二课, 基础类型和入门高级类型 第三课, 泛型 第四课, 解读高级类型 第五课, 什么是命名空间(namespace)? 很重要 这一节很重要, 可以说是ts的最核心部分, 这一节学完其实就可以开始用ts写代码了, 想想typescript中的type, 再看看标题中的"类型"2字, 所以请大家务必认真. 什么是入门高级类...

更新啦 第一课, 体验typescript 第二课, 基础类型和入门高级类型 第三课, 泛型 第四课, 解读高级类型 第五课, 什么是命名空间(namespace)? vue3要来了 看了vue conf 2019的视频, 特别兴奋, vue3要来了!vue3是用typescript开发的, 我揣测在vue的带领下typescript会成为主流呢, 要不先学点. 19年最酷的前端技术 我是19年初...

没关系, 面试的时候总会问如何在Vue的实例上挂载一个方法/属性, 也就是Vue.prototype的小技巧, 但是突然有人问他俩有啥关系还真是新鲜.

新增vscode插件 vscode中搜索"any-rule"进行安装. 仓库地址: [链接] 使用方法 安装vscode中插件搜索框输入any-rule 安装完毕后按F1(或者ctrl+shift+p). 输入"zz"可以看到正则列表. 或者输入关键词, 比如"手机". 网页版 [链接] 支持的正则(2019年8月11日更新) 迅雷链接 {代码...} ed2k链接(宽松匹配) {代码...} 磁力链接(...

any-touch 先看demo demo 本次文章先实现内容拖拽和滑动动画, 后续文章一步一步增加功能, 比如滚动条/ 下拉加载等功能. 说点湿的 iscroll其实代码量挺大的(近2100行, 还有另一个类似的库betterScroll他的代码量和iscroll差不多, 因为原理都是一样的), 阅读他们的代码发现里面很多逻辑其实都是在做手势判断, 比如拖拽(pan...

any-touch 一个手势库 demo 预览 drawer的基本逻辑 添加2个div, 一个是当drawer隐藏的时候打开隐藏的触发开关, 一个是drawer本身. 对把手和drawer进行进行fixed定位到界面的右侧边缘. 调整drawer和把手的样式, 这里把手主要是要设置背景色为透明, 具体样式看下面代码. 用any-touch分别给把手和drawer添加pan(拖拽)手势. ...

any-touch 一个手势库 往期目录 用 TypeScript 开发手势库 - (1)web开发常用手势有哪些? 用 TypeScript 开发手势库 - (2)web开发常用手势有哪些? 不到30行, 用any-touch实现一个drawer 简单看下架构 实现输入格式统一(input) 为了同时支持鼠标和touch设备, 我们第一步把2种设备产生数据统一化, 统一化后的数据我们统一叫...

any-touch 一个手势库 往期目录 用 TypeScript 开发手势库 - (1)web开发常用手势有哪些? 用TypeScript开发手势库 - (3)统一化Mouse和Touch事件 不到30行, 用any-touch实现一个drawer 标题有点长 今天的标题有点长, 但不难, 讲的都是工具配置和使用, 就3个知识点: 如何配置tsconfig.json 如何配置rollup.config.js 使用np...

说在最前面,本文是一个系列文章的开头, 这个系列里我会讲如何用typescript开发一款支持pc和手机端的手势库any-touch, 以及通过jest让你的代码测试覆盖率100%.