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次就是单击
解决延迟方案
1. 封装一个tap事件使用touchstart 和 touchmove touchend事件模拟如果只触发了touchstart touchend 没有触发touchmove 认为是单击操作
2. 使用zepto第三方的库里面的tap事件
3. 使用fastclick包专门解决问题
移动端到底用什么点击事件：一般全部使用tap事件
zepto库基本使用：跟jquery一样只有模块不一样有些模块没在主包单独引入一些其他模块
移动端屏幕适配：主流使用rem
rem适配本质：
1. 把所有单位使用rem这种相对单位 (只有相对单位才能自适应)
2. 当屏幕变化的时候让屏幕的字体随着屏幕变化而变化
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工具的使用
1. 你要知道你当前设计稿宽度是多少比如750 (但是写代码如果缩小了一倍)工具设计稿和你写代码的真实宽度一样是375
2. 基础字体值(当前写代码屏幕比如375对应的根元素大小100)
3. 左边放写px代码点击pxtorem转换成rem
4. 在页面中引入能够动态改变根元素字体大小的JS(放在前面引入要优先让html有字体大小跟页面渲染有关系的优先执行)

找bug技巧

多看bug(见多识广)
会找bug
页面结构bug 标签是否有结束标签是否会多加结束标签单词错误标签嵌套错误
页面样式bug
1. 样式没出来
2. 样式文件没引入
3. 样式生效没有（审查元素找到要设置样式的元素）如果看不到选择器选错类名或者id写错
4. 样式有但没有效果
5. 样式属性是否写属性前有感叹号属性错了或者值
6. 样式属性是否被覆盖或者继承样式属性有没有中划线
7. 自己不知道怎么写样式居中（内容居中text-align:center）块居中margin:0 auto;
8. 引入bootstrap会出的样式问题
9. 没有引入包
10. 类名错误
11. 发现覆盖不了bootstrap选择器优先级不够
页面功能bug
功能没生效
文件没引入
依赖的文件没引入（jquery zepto ）
是否定义函数有没有被调用
代码是否报错（单词错赋值错变量名。。）
看代码是否执行（断点调试看看代码是否执行（事件没被触发事件名错误元素没获取到））
一些获取值的方式错误（兼容性问题单词错误）
逻辑错误 (代码执行顺序是否符合你写的顺序 )
变量名重复全局已经有变量局部又用var
环境系统bug
善于总结
出了bug记录下来 bug现象 bug原因解决方案

移动web总结

移动web开发的现状：前端最热门的开发市场大需求大工资高代码少兼容性少容易学
移动web的开发方式
1. 响应式开发方式一个页面适配多个终端
2. 原生开发方式单独PC和移动端都写一套代码
响应式开发的原理：媒体查询
@media(width:值){
//条件成立执行的代码
}
判断有3种
width:值等于这个值
min-width:值大于等于这个值从小到大写向下覆盖
max-width:值小于等于这个从大到小写向上覆盖
响应式的开发框架
bootstrap 最常用的
MUI
AmazeUI
bootstrap的使用
1. 下载包
2. 看懂文档全局CSS样式（一些简单类名）组件（标签类名组合在一起的效果但是没有交互）插件（组件并带有交互）
3. 找到需要的样式或者组件插件复制结构
4. 需要修改样式审查元素找到样式对应的类名覆盖推荐外面使用id 方便覆盖
容器 container 布局容器居中栅格系统行和列 row放到container里面 col放到行里面
列有4个档次 xs sm md lg
一行最多分为12列 col-xs-1 col-xs-12
导航条轮播图折叠菜单collapse 标签页表单表格媒体对象弹出框提示工具模态框按钮响应式工具
字体图标上传svg图标下载代码引入css使用类名原理是使用CSS3 web字体引入对应字体文件使用图标对应的编码
移动端基本概念手机分辨率通常比真实宽高大2倍图片都是按照分辨率来设计页面CSS宽高是按照真实的宽高设置使用图片和背景图要缩小一半来写
搭建jd首页布局百分比布局 + flex布局
顶部渐变效果获取滚动条高度
倒计时JS 获取时间计算分别计算时分秒十位个位来显示倒计时
轮播图使用swiper轮播图
背景图背景图定位原点和背景图裁切
分类左右2侧 flex布局
分类左右2侧滑动使用swiper滑动
swiper插件的使用
引入包 css
引入js
写页面结构

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      内容或者图片
    </div>
  </div>
</div>
4. 如果滚动还需要设置样式
  .swiper-container{
      height:100%;
  } 
  body,html父元素等都要设置100%高度
  .swiper-slide 高度自动
5. 对轮播图插件去初始化
    // 3. 初始化swiper的滑动
    var swiper = new Swiper('.swiper-container', {
     // 控制轮播图滚动的方向 horizontal水平 vertical 垂直
        direction: 'vertical',
       //可以支持多个swiper-slide 可以有多个轮播图
        slidesPerView: 'auto',
        //支持弹簧
        freeMode: true,
        //控制轮播图动画切换的速度  轮播图动画的时间
        speed: 300,
        //添加一个小手
        grabCursor: true,
        // 添加循环 无缝轮播图 
        loop: true,
        //添加自动轮播图 delay自动轮播的间隔时间
        autoplay: {
            delay: 1000,
            //到最后一张停止自动轮播图 但是loop了后就停不下来了
            stopOnLastSlide: true,
            // 是否要当触摸的时候禁止自动轮播图  ture就禁止 false不禁止
            disableOnInteraction: false,
        },
        // 给图片直接添加间距
        // spaceBetween : 100,
        // 如果需要分页器  小圆点
        pagination: {
            el: '.swiper-pagination',
        },
        // 如果需要前进后退按钮  左右箭头
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        //支持鼠标滚轮  只有PC能用
        mousewheel: true,
    });

移动端点击事件有300ms延迟可以使用touch事件模拟click 也可以使用第三方包fastclick解决
常见移动端滑动事件 touchstart touchmove touchend e事件源对象 e.touches所有手指
e.touches[0].clientX 手指在页面上水平位置 e.touches[0].clientY 垂直位置
移动端zepto库类似jquery 有jquery就不要使用zepto 不要同时引入2个包 $ 会冲突
rem: root element根元素参照根元素html元素的字体大小 1html的字体大小16px 1rem=16px
rem的好处相对html字体大小html字体大小不会随意变化统一所有使用rem的大小实现宽度和高度的和内容都自适应
使用rem实现网页自适应的原理是通过媒体查询或者JS来不断改变html的字体大小html字体大小改变那么使用rem单位大小都会被改变
rem工具 http://alurk.com/ 使用
1. 打开工具输入设计稿宽度(写代码屏幕的宽度375)
  输入基础字体值(写代码屏幕的宽度375根元素的字体大小100)
2. 去掉后面的生成媒体查询等勾(因为我们已经使用JS改变根元素了)
3. 点击转换把代码粘贴回来

找网站和扒网站

bootstrap官网的案例 http://expo.bootcss.com/
妹子UI的官网的案例 http://amazeui.org/showcase/
无忧网络官网的案例 http://www.cnitc.net
招聘网站上的一些项目
扒网站
1. 打开 TeleportUltraPortable.exe 程序
2. 点击左上角的file > new project wizard
3. 点击第二个单选按钮 Duplicate
4. 点击下下一步输入要扒的网址 up里面是扒几层
5. 一路下一步保存到一个目录
6. 点击中间上方的蓝色开始箭头开始扒
7. 扒完了在目录旁边出一个文件夹就是网站的文件夹

前端学习路线

https://zwxs.github.io/FrontEndMaterial/synthesis.html

web移动开发总结(六)

总结

分类页面左侧的点击吸顶效果

移动端click事件的延迟问题

使用fastclick包解决点击事件延迟问题

移动端一些触摸事件

解决延迟的原理使用移动端touch相关事件模拟一个click (也就tap)

移动端的js库 zepto

移动端页面屏幕适配

使用相对的单位来实现屏幕适配

rem适配的原理

使用rem实现 jd页面的屏幕适配 （注意只有原生移动web才能使用rem 响应式开发不能使用）

步骤

今日总结

找bug技巧

移动web总结

找网站和扒网站

前端学习路线

猜你喜欢

使用rem实现 jd页面的屏幕适配（注意只有原生移动web才能使用rem 响应式开发不能使用）