随笔分类 - 移动端
摘要：功能比较简单常见，最近整理一下做备份记录。先看看线上 整体实际效果 ，基于原生js,不依赖其他类库 博客园地址 https://www.cnblogs.com/surfaces/p/8426056.html github 地址：https://taylor-swift-1989.github.io/
阅读全文
摘要：结合 Framework7 和ios UI系统，微信weUI，支付宝H5 我们在移动端一些css用法 细节的有了更深的了解； 高斯模糊的显示效果，ios8以上支持，ios8以上0.5px，backdrop-filter: blur(10px)等新的属性被支持； 适当利用伪元素 比如menu 菜单ic
阅读全文
摘要：移动端最高频耗内存的的操作 莫属 touchmove 与scroll事件 两者需要 微观的 优化，使用 requestAnimationFrame性能优化 H5性能优化requestAnimationFrame 这里 我们 讲述 touchmove；touchmove 事件发生很频繁，会比屏幕刷新率
阅读全文
摘要：直接上图，左右拖拽轮播图时候 上下事件会存在冲突；翻看了 swipe.js源码，找到了解决办法； 源码附录： 上面还需要优化的 地方，touchmove时候，没有在16.6毫秒内 进行正确的渲染 需要调用 requestAnimationFrame 进行正确的监听渲染，后期补充；
阅读全文
摘要：什么是 像素渲染流水线 web页面你所写的页面代码是如何被转换成屏幕上显示的像素的。这个转换过程可以归纳为这样的一个流水线，包含五个关键步骤； 1.JavaScript：一般来说，我们会使用JavaScript来实现一些视觉变化的效果。比如用jQuery的animate函数做一个动画、对一个数据集进
阅读全文
摘要：总结一下： 有点：网易新闻，微信 热文 都是 -webkit-overflow-scrolling: touch;实现，css实现，轻巧； bug： 部分安卓浏览器（uc，自带） 只支持持续滑动，不支持回弹， iphone垂直滑动 第一次不能完全持续滑动到底部；总体不影响使用； 偶尔低端的手机会卡，
阅读全文
摘要：在Framework7，其特色的HTML框架，可以创建精美的iOS应用; 她有自己的 DOM7 - 一个集成了大部分常用DOM操作的高性能库。你不需要学习任何新的东西，因为她的用法和大名鼎鼎的jQuery几乎是一样的，包括大部分常用的方法和jquery风格的链式调用。去查看了一下dom7.js的源码
阅读全文
摘要：/* Zepto v1.0-1-ga3cab6c - polyfill zepto detect event ajax form fx - zeptojs.com/license */ ;(function(undefined) { if (String.prototype.trim === undefined) // fix for iOS 3.2 String.prototype.t...
阅读全文
摘要：基本用法 querySelector 该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素。 ----> querySelector得到一个DOM var element = document.querySelector('#
阅读全文
摘要：Retina屏的移动设备如何实现真正1px的线？ 在retina屏下面，如果你写了这样的meta <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
阅读全文
摘要：在移动端h5页面；尤其那些全屏幕的盒展示切换页面，当用户无意中将手指滑到了 浏览器地址拦以上(中国移动这快区域)；此时，手指已经离开屏幕了，但是ios上无法监听到touchend 事件；touchend监听的回调函数事件直接失效； 手机扫扫预览： http://www.cnblogs.com/sur
阅读全文
摘要：节点操作 var div2 = document.querySelector("#div2"); div2.insertAdjacentHTML("beforebegin","<p>hello world</p>");//在调用元素外部前面添加一个元素 div2.insertAdjacentHTML
阅读全文
摘要：移动端 css3 transition 动画 ，requestAnimationFrame 动画 对于性能的要求，h5优先考虑； 移动端 单页有时候 制作只用到简单的css3动画即可，我们封装一下，没必要引入zepto框架，把zepto的动画模块从Zepto 扒下来，加以改造独立；用于生产环境；下面
阅读全文
摘要：<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=320,user-scalab
阅读全文
摘要：惯性滚动 关于惯性滚动速度 方法一 //speed = ( 结束时候手的位置 - 起点的位置 ) / ( 结束时候的时间 - 开始时的时间 ) speed = (endY - startY) / (endTime - startTime); 方法二 iSpeedX = touchs.pageX -
阅读全文
摘要：这是官网：http://hokaccha.github.io/js-flipsnap/ 1.引入全局命名空间 类似jQuery插件写法 传入window, document，提高内部访问速度； ;(function(window, document, undefined){})(window, wi
阅读全文
摘要：fixed元素，常见网站右侧出现一个返回顶部的按钮，滚动的时候，会发现返回顶部这个区域在不停的进行重绘，而返回顶部是position:fixed定位的。这也解释了为什么fixed定位是最耗性能的属性之一 如何查看元素在不停的重绘呢？Chrome渲染分析工具 Rendering； 如上图，按F12调出
阅读全文
摘要：这个滑动条 淘宝 app上比较常见;滑动条 全部 男1装 女2装 鞋3子 ...
阅读全文
摘要：rem两个比较好的框架 淘宝Flexible https://github.com/amfe/lib-flexible 使用Flexible实现手淘H5页面的终端适配 https://github.com/amfe/article/issues/17 adaptive https://github.
阅读全文
摘要：tap事件 tap 事件相当于 pc 浏览器中的 click 效果，虽然在触屏设备上 click 事件仍然可用，但是在很多设备上，click 会存在一些延迟，如果想要快速响应的 “click” 事件，需要借助 touch 事件来实现。 element.addeventlistener( 'touch
阅读全文
