web移动开发总结(六)

总结

1. 分类左侧的点击吸顶
2. 移动端的滑动事件 (重点)
3. 移动端点击事件延迟和解决 (重点)
4. 移动端的zepto框架
5. rem的概念和实现屏幕适配 (重点)
6. rem工具的使用实现jd项目

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

1. 需求

2. 点击了左侧分类的菜单

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

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

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

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

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

8. 思路

9. 给分类左侧添加点击事件

10. 先给全部菜单都添加一个索引的属性

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

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

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

14. 设置过渡效果

15. 清除全部li的active位移 给当前点击的li添加active类名

移动端click事件的延迟问题

1. 在移动端手机里面 click事件是有必定延迟的 大概300ms
   延迟的缘由是手机端为了兼容双击操做 若是300ms之内点击2次就认为是双击事件
   若是300ms之内只点击了一次就是单击操做
2. 解决方案 就是使用touch系列事件封装一个不延迟的click事件

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

1. 引包引入fastclick
2. 给页面的body元素绑定fastclick 间接为全部元素绑定了
   // 绑定fastclick 给body绑定 由于元素都在body里面 间接为全部元素都绑定了fastclick
   window.addEventListener(‘load’, function() {
   new FastClick(document.body);
   }, false);
3. 后续就直接添加click就不会延迟了
   // 绑定了fastclick后 添加事件的方式仍是和以前同样加click事件 可是这个click已经不会延迟了
   div.addEventListener(‘click’, function() {
   console.log(‘点击事件’);
   });

移动端一些触摸事件

1. touchstart 手指触摸的时候触发
2. touchmove 手指移动的时候触发
3. touchend 手指触摸离开的时候触发
4. touchcancel 触摸意外中断会触发 触摸的时候遇到了优先级更高的事件

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

1. 由于touch事件在手机里面是不会延迟
2. 只是触发了touchstart和touchend可是没有触发touchmove 就认为是一个单击操做(单击事件)
3. 若是触发touchmove 表示手指不只单击还触发移动 不是一个单击操做
4. 还能够添加事件判断 记录滑动开始的时间和滑动结束的时间进行相减判断 手指按下的时间有没有超过300ms 不超过才是单击操做

移动端的js库 zepto

1. zepto: 是一个轻量级用来操做DOM元素的JS库 相似于jquery 全部方法用法都和jquery同样 只要会使用jquery就会使用zepto
2. 为何要使用zepto: 轻量级 对移动端兼容性好一点
3. 可是要注意zepto的版本问题 有些老版本的zepto是分模块的 若是要使用tap之类的事件须要引入touch.js模块
4. 能够把全部模块打包到一个zepto.js里面(使用node编译)
5. 在移动端若是使用了zepto千万不能再使用jquery 都是$会冲突

移动端页面屏幕适配

1. 为何要适配屏幕： 手机屏幕很小 页面都是全屏 不一样的大小的屏幕 展现内容不同
2. 但愿页面在任何屏幕都保持一个等比例 但愿每一个屏幕看到的效果都是同样的
3. 手机小 页面文字 图片 全部内容 都比较小
4. 手机大 页面文字 图片 全部内容 都比较大

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

1. em : element 相对自身元素的字体大小
   div自身字体大小16 1em=16px
   div自身字体大小20 1em=20px
2. rem : root element 相对根元素的字体大小
   html元素的字体大小16px 1rem = 16px
   html元素的字体大小30px 1rem = 30px
3. 相对单位的概念就这个单位的值不是固定的 而是参照字体大小而变化而变化

rem适配的原理

1. 页面中都把px写成rem相对单位 都相对根元素的字体大小
2. 不一样屏幕改变根元素的字体大小的值
3. 使用媒体查询方式改变根元素大小值
   @media(width:750px){
   html{
   font-size:200px;
   }
   }
   @media(width:375px){
   html{
   font-size:100px;
   }
   }
4. 使用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 响应式开发不能使用）

1. 原理把页面的px转成rem单位
2. 根元素字体大小要随着屏幕变化而变化（等比例变化）
3. 根元素字体变化 页面使用rem单位的大小也会自动跟着变化

步骤

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

今日总结

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

2. 移动点击事件的延迟： 缘由是为了兼容双击 300ms之内点击2次就是双击操做1次就是单击

3. 解决延迟方案

   1. 封装一个tap事件 使用touchstart 和 touchmove touchend事件模拟 若是只触发了touchstart touchend 没有触发touchmove 认为是单击操做
   2. 使用zepto第三方的库里面的tap事件
   3. 使用fastclick包 专门解决问题

4. 移动端到底用什么点击事件： 通常所有使用tap事件

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

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

7. rem适配本质：

   1. 把全部单位使用rem这种相对单位 (只有相对单位才能自适应)
   2. 当屏幕变化的时候 让屏幕的字体 随着屏幕变化而变化

8. 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 * 当前屏幕的宽度

9. rem工具的使用

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

找bug技巧

1. 多看bug(见多识广)

2. 会找bug

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

4. 页面样式bug

   1. 样式没出来
   2. 样式文件没引入
   3. 样式生效没有（审查元素找到要设置样式的元素） 若是看不到 选择器选错 类名或者id写错
   4. 样式有但没有效果
   5. 样式属性是否写 属性前有感叹号属性错了 或者值
   6. 样式属性是否被覆盖或者继承 样式属性有没有中划线
   7. 本身不知道怎么写样式 居中（内容居中text-align:center）块居中margin:0 auto;
   8. 引入bootstrap会出的样式问题
   9. 没有引入包
   10. 类名错误
   11. 发现覆盖不了bootstrap选择器优先级不够

5. 页面功能bug

6. 功能没生效

7. 文件没引入

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

9. 是否认义函数 有没有被调用

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

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

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

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

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

15. 环境系统bug

16. 善于总结

17. 出了bug记录下来 bug现象 bug缘由 解决方案

移动web总结

1. 移动web开发的现状： 前端最热门的开发 市场大 需求大 工资高 代码少 兼容性少 容易学

2. 移动web的开发方式

   1. 响应式开发方式 一个页面适配多个终端
   2. 原生开发方式 单独PC和移动端都写一套代码

3. 响应式开发的原理： 媒体查询
   @media(width:值){
   //条件成立执行的代码
   }                               站群系统            
   判断有3种
   width:值 等于这个值
   min-width:值 大于等于这个值 从小到大写 向下覆盖
   max-width:值 小于等于这个 从大到小写 向上覆盖

4. 响应式的开发框架
   bootstrap 最经常使用的
   MUI
   AmazeUI

5. bootstrap的使用

   1. 下载包
   2. 看懂文档 全局CSS样式（一些简单类名） 组件 （标签类名组合在一块儿的效果可是没有交互） 插件 （组件并带有交互）
   3. 找到须要的样式或者组件插件 复制结构
   4. 须要修改样式 审查元素找到样式对应的类名 覆盖 推荐外面使用id 方便覆盖

6. 容器 container 布局容器 居中 栅格系统 行和 列 row放到container里面 col放到行里面
   列有4个档次 xs sm md lg
   一行最多分为12列 col-xs-1 col-xs-12            

7. 导航条 轮播图 折叠菜单collapse 标签页 表单表格 媒体对象 弹出框 提示工具 模态框 按钮 响应式工具

8. 字体图标上传svg图标下载代码引入css使用类名 原理是使用CSS3 web字体 引入对应字体文件 使用图标对应的编码

9. 移动端基本概念 手机分辨率一般比真实宽高大2倍 图片都是按照分辨率来设计 页面CSS宽高是按照真实的宽高设置 使用图片和背景图要缩小一半来写

10. 搭建jd首页布局 百分比布局 + flex布局

11. 顶部渐变效果 获取滚动条高度

12. 倒计时JS 获取时间计算 分别计算时分秒十位个位来显示倒计时

13. 轮播图使用swiper轮播图

14. 背景图背景图定位原点和背景图裁切

15. 分类左右2侧 flex布局

16. 分类左右2侧滑动使用swiper滑动

17. swiper插件的使用

18. 引入包 css

19. 引入js

20. 写页面结构

<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,
    });