web移动开发小结

总结

分类左侧的点击吸顶
移动端的滑动事件 (重点)
移动端点击事件延迟和解决 (重点)
移动端的zepto框架
rem的概念和实现屏幕适配 (重点)
rem工具的使用实现jd项目
分类页面左侧的点击吸顶效果

需求

点击了左侧分类的菜单

位移到当前点击的分类菜单 到顶部的位置

位移为 （-当前菜单索引*菜单高度）

位移的时候还需要添加过渡效果 慢慢的上去

当菜单需要位移的距离超过了最小位移的距离 默认为最小位移距离

最小位移距离 父元素高度-子元素高度

思路

给分类左侧添加点击事件

先给所有菜单都添加一个索引的属性

拿到当前点击菜单的索引 和 菜单高度

计算当前点击菜单的位移距离 == - 索引 * 高度

获取swiper-wrapper 给他设置这个位移距离 判断如果没有超过最大位移的距离就设置计算的距离 如果超过最大位移距离 设置为最大的位移距离

设置过渡效果

清除所有li的active位移 给当前点击的li添加active类名

移动端click事件的延迟问题

在移动端手机里面 click事件是有一定延迟的 大概300ms
延迟的原因是手机端为了兼容双击操作 如果300ms以内点击2次就认为是双击事件
如果300ms以内只点击了一次就是单击操作
解决方案 就是使用touch系列事件封装一个不延迟的click事件
使用fastclick包解决点击事件延迟问题
引包引入fastclick
给页面的body元素绑定fastclick 间接为所有元素绑定了
// 绑定fastclick 给body绑定 因为元素都在body里面 间接为所有元素都绑定了fastclick
window.addEventListener(‘load’, function() {
new FastClick(document.body);
}, false);
后续就直接添加click就不会延迟了
// 绑定了fastclick后 添加事件的方式还是和之前一样加click事件 但是这个click已经不会延迟了
div.addEventListener(‘click’, function() {
console.log(‘点击事件’);
});

移动端一些触摸事件

touchstart 手指触摸的时候触发
touchmove 手指移动的时候触发
touchend 手指触摸离开的时候触发
touchcancel 触摸意外中断会触发 触摸的时候遇到了优先级更高的事件
解决延迟的原理使用移动端touch相关事件模拟一个click (也就tap)
因为touch事件在手机里面是不会延迟
只是触发了touchstart和touchend但是没有触发touchmove 就认为是一个单击操作(单击事件)
如果触发touchmove 表示手指不仅单击还触发移动 不是一个单击操作
还可以添加事件判断 记录滑动开始的时间和滑动结束的时间进行相减判断 手指按下的时间有没有超过300ms 不超过才是单击操作
移动端的js库 zepto
zepto: 是一个轻量级用来操作DOM元素的JS库 类似于jquery 所有方法用法都和jquery一样 只要会使用jquery就会使用zepto
为什么要使用zepto: 轻量级 对移动端兼容性好一点
但是要注意zepto的版本问题 有些老版本的zepto是分模块的 如果要使用tap之类的事件需要引入

touch.js模块

可以把所有模块打包到一个zepto.js里面(使用node编译)
在移动端如果使用了zepto千万不能再使用jquery 都是$会冲突
移动端页面屏幕适配
为什么要适配屏幕： 手机屏幕很小 页面都是全屏 不同的大小的屏幕 展示内容不一样
希望页面在任何屏幕都保持一个等比例 希望每个屏幕看到的效果都是一样的
手机小 页面文字 图片 所有内容 都比较小
手机大 页面文字 图片 所有内容 都比较大
使用相对的单位来实现屏幕适配
em : element 相对自身元素的字体大小
div自身字体大小16 1em=16px
div自身字体大小20 1em=20px
rem : root element 相对根元素的字体大小
html元素的字体大小16px 1rem = 16px
html元素的字体大小30px 1rem = 30px
相对单位的概念就这个单位的值不是固定的 而是参照字体大小而变化而变化

rem适配的原理

页面中都把px写成rem相对单位 都相对根元素的字体大小
不同屏幕改变根元素的字体大小的值
使用媒体查询方式改变根元素大小值
@media(width:750px){
html{
font-size:200px;
}
}
@media(width:375px){
html{
font-size:100px;
}
}
使用JS方式来改变rem的值
// 假设一个设计稿的宽度 750
var DesignWidth = 750;
var DesignFontSize = 200;
// 获取当前视口的宽度
var nowWidth = document.documentElement.clientWidth;
/750 / 200 == 375 / 100
设计稿 / 设计稿根元素 == 当前屏幕 / 当前屏幕根元素
375 / (750 / 200) == 100
当屏幕 / (设计稿 / 设计稿的根元素)
320 / (750 / 200) == 85.3333px /
/ 4 / 2 == 2 / x
2 / ( 4 / 2 ) == 1/
var nowFontSize = nowWidth / (DesignWidth / DesignFontSize);
document.documentElement.style.fontSize = nowFontSize + ‘px’;
使用rem实现 jd页面的屏幕适配 （注意只有原生移动web才能使用rem 响应式开发不能使用）
原理把页面的px转成rem单位
根元素字体大小要随着屏幕变化而变化（等比例变化）
根元素字体变化 页面使用rem单位的大小也会自动跟着变化

步骤

把页面所有rem单位都写成px base.less里面 默认body的font-size是 1.4rem其实是14px
打开本地的px转rem的工具tool.html
把less代码复制到里面的左边 然后设置设计稿宽度 375 基础字体值100px 因为我们按照375写的代码就写375 在375屏幕下根元素是100px
去掉自动生成rem的复选框
点击转换生成对应的rem单位
在页面中引入更改根元素字体大小的JS代码

今日总结

移动端的触摸事件 touchstart touchmove touchend touchcancel

移动点击事件的延迟： 原因是为了兼容双击 300ms以内点击2次就是双击操作1次就是单击

解决延迟方案

封装一个tap事件 使用touchstart 和 touchmove touchend事件模拟 如果只触发了touchstart touchend 没有触发touchmove 认为是单击操作
使用zepto第三方的库里面的tap事件
使用fastclick包 专门解决问题
移动端到底用什么点击事件： 一般全部使用tap事件

zepto库基本使用： 跟jquery一样 只有模块不一样 有些模块没在主包 单独引入一些其他模块

移动端屏幕适配： 主流使用rem

rem适配本质：

把所有单位使用rem这种相对单位 (只有相对单位才能自适应)
当屏幕变化的时候 让屏幕的字体 随着屏幕变化而变化
rem根元素变化公式
1rem = 根元素字体大小 默认是16px
假设设计稿的大小750 设计稿 根元素大小是200px 375屏幕刚好是设计稿的一半 那么375根元素大小也是设计稿对应根元素大小一半就是100px
设计稿宽度 / 设计稿根元素 == 当前屏幕宽度 / 当前屏幕根元素
375 / (750 / 200) == 100
当屏幕宽度 / (设计稿宽度 / 设计稿的根元素)
320 / (750 / 200) == 85.3333px /
/ 4 / 2 == 2 / x
2 / ( 4 / 2 ) == 1
公式: 当前屏幕对应的字体大小 = 当屏幕宽度 / (设计稿宽度 / 设计稿的根元素)
假如将来设计稿大小不一样 就按照公式套就行了

淘宝的rem适配 当前屏幕的字体大小 = 标准屏幕字体大小100px/标准屏幕宽度375 * 当前屏幕的宽度

rem工具的使用

你要知道你当前设计稿宽度是多少比如750 (但是写代码如果缩小了一倍)工具设计稿和你写代码的真实宽度一样是375
基础字体值(当前写代码屏幕比如375对应的根元素大小100)
左边放写px代码 点击pxtorem转换成rem
在页面中引入能够动态改变根元素字体大小的JS(放在前面引入要优先让html有字体大小跟页面渲染有关系的优先执行)

找bug技巧

多看bug(见多识广)

会找bug

页面结构bug 标签是否有结束 标签是否会多加结束 标签单词错误 标签嵌套错误

页面样式bug

样式没出来
样式文件没引入
样式生效没有（审查元素找到要设置样式的元素） 如果看不到 选择器选错 类名或者id写错
样式有但没有效果
样式属性是否写 属性前有感叹号属性错了 或者值
样式属性是否被覆盖或者继承 样式属性有没有中划线
自己不知道怎么写样式 居中（内容居中text-align:center）块居中margin:0 auto;
引入bootstrap会出的样式问题
没有引入包
类名错误
发现覆盖不了bootstrap选择器优先级不够
页面功能bug

功能没生效

文件没引入

依赖的文件没引入（jquery zepto ）

是否定义函数 有没有被调用

代码是否报错 （单词错 赋值错 变量名。。）

看代码是否执行 （断点调试看看代码是否执行（事件没被触发 事件名错误 元素没获取到））

一些获取值的方式错误（兼容性问题 单词错误）

逻辑错误 (代码执行顺序是否符合你写的顺序 )

变量名重复 全局已经有变量 局部又用var

环境系统bug

善于总结

出了bug记录下来 bug现象 bug原因 解决方案

作者：庚中
来源：CSDN
原文：https://blog.csdn.net/xiaodi520520/article/details/84945872