web移动开发总结(五)

总结

1. 顶部搜索框渐变JS
2. 秒杀商品倒计时JS
3. 轮播图插件的使用
4. 分类页面的布局

顶部搜索的背景色渐变

1. 需求： 在滚动条滚动距离在轮播图高度范围内的时候实现顶部搜索的背景色透明度渐变
   rgba(255,0,0,0)
   rgba(255,0,0,1)
   rgba的最后一个值透明度从0-1的变化
2. 思路： 计算当前的滚动条滚动到的距离的透明度的值
   1. 获取当前滚动条的距离
   2. 获取当前轮播图的高度
   3. 计算透明度 = 距离/高度
   4. 计算好后把透明度值 设置背景色的rgba里面把最后一个值改成计算的透明度

倒计时JS功能

1. 需求： 有一个未来的时间 还有当前的时间 使用未来的时间-当前的时间作为一个倒计时 把这个倒计时时间 设置到页面中显示 分别显示时分秒 每隔一秒倒计时总时间要-- 页面时时更新
2. 思路
   1. 获取到未来的时间
   2. 获取当前的时间
   3. 倒计时的总时间 = 使用未来时间-当前时间
   4. 定一个定时器(每隔1秒执行一次) 让总时间每秒–
   5. 计算-- 完后的时间的 时 分 秒
   6. 把时分秒的十位和个位分别设置到每个span里面

轮播图JS效果 插件的使用 ( swiper插件)[https://www.swiper.com.cn]

1. 下载swiper插件
2. 引包 注意引入CSS和JS2个包
   1. 引入swiper.css
   2. 引入swiper.js
3. 写一个轮播图需要结构

Slide 1

Slide 2

Slide 3

注意一定要使用官网的类名因为有样式的没有类名就有样式 4. 给轮播图大容器设置样式 限制轮播图的宽高 .swiper-container { width: 600px; height: 300px; } 5. 添加一个JS代码去初始化轮播图 传入一些初始化的一些参数

swiper插件的一些常见参数

1. 轮播图的方向
   direction: ‘vertical’ 垂直
   direction: ‘horizontal’ 水平

2. 自动轮播图
   autoplay:{
   delay: 3000,//轮播图的延迟
   stopOnLastSlide: false,// 如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）
   disableOnInteraction:true,//当用户滑动的时候禁止自动轮播图 不需要禁止就为false
   }

3. 是否开启无缝轮播图
   loop: true,//是否开启无缝轮播图 开启无轮播图 如果不开 刷回去倒退回去

4. 是否显示小圆点
   pagination:{
   el: ‘.swiper-pagination’,//如果需要显示小圆点就指定小圆点容器

   }

5. 是否要左右箭头
   navigation: {
   nextEl: ‘.swiper-button-next’,
   prevEl: ‘.swiper-button-prev’,
   },//指定左右箭头的容器

   扫描二维码关注公众号，回复： 4455460 查看本文章

6. 是否要支持滚动条
   scrollbar: {
   el: ‘.swiper-scrollbar’,
   },//指定滚动条的容器

修改轮播图的样式

1. 如果需要修改图片大小 直接选中你的图片设置大小
2. 如果要修改小圆点的样式

使用swiper完成jd主页轮播图效果

1. 引包 注意在我们的样式前面引入swiper.css 在我们的js前面引入swiper.js
2. 写结构
   

   

   

   

   

   

   

   

3. 设置样式 slide { img { width: 100%; } /* 修改小圆点样式 */ .swiper-pagination-bullet { background-color: transparent; opacity: 1; border: 1px solid #fff; width: 8px; height: 8px; box-sizing: border-box; } .swiper-pagination-bullet-active { background-color: #fff; } } 4. 初始化jd的轮播图 var mySwiper = new Swiper('#slide .swiper-container', { direction: 'horizontal', // 垂直切换选项 autoplay: { delay: 1000, //轮播图的延迟 stopOnLastSlide: false, // 如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效） disableOnInteraction: false //当用户滑动的时候禁止自动轮播图 不需要禁止就为false }, loop: true, // 是否开启无缝轮播图 开启无轮播图 如果不开 刷回去倒退回去 // 如果需要分页器 pagination: { el: '.swiper-pagination', } });

京东分类页面布局

1. 京东分类页面是全屏的 水平和垂直都没有滚动条 （注意）
2. 要显示更多内容 使用滑动来实现 （注意）
   左侧菜单有滑动
   右侧商品列表也有滑动
   滑动都是垂直方向

实现分类页面的全屏布局

1. 给头部 固定高度 位置固定定位在顶部
2. 给底部 固定高度 位置固定定位在底部
3. 给html和body设置高度100%
4. 给body设置padding-top 和 padding-bottom 让main往中间挤
5. 给main设置height:100% 就和body的高度一致
6. 给main里面的category-left 和 category-right 设置高度100%

使用swiper的滑动效果来实现分类左右侧滑动功能

1. 使用swiper官方demo里面的内容滚动
2. 使用方式
   1. 引包引入swiper.css 和 js
   2. 写结构

• 内容
• 内容
• 内容
• 内容

3. 写样式 html, body { position: relative; height: 100%; } /.swiper-container滑动父容器 容器的高度和body一样高 高度是固定的/ .swiper-container { width: 100%; height: 100%; } /滑动的子容器 他的的高度是自适应由内容撑开 默认之前支持轮播图写了100%的高度需要设置height:auto去覆盖100%的高度/ .swiper-slide { height: auto; } 4. 一定要给html body设置高度100% 要给.swiper-container大容器设置高度100% 5. 设置子元素高度 auto 由内容撑开 保证子元素高度比父元素高 当子元素比父元素高的时候才有必要做滑动 因为swiper实现轮播图设置了高度100%把他还原成auto 6. 初始化swiper var swiper = new Swiper('.swiper-container', { direction: 'vertical',//方向垂直 slidesPerView: 'auto',//支持多张图 freeMode: true,//支持回弹 scrollbar: { el: '.swiper-scrollbar', }, mousewheel: true,//支持鼠标滚轮 });

总结

移动端的JS

1. 使用HTML新的方式操作JS dom之类的操作
2. 添加事件addEventListener
3. 获取元素querySelector querySelectorAll
4. 顶部搜索背景色渐变
   1. 当头部在轮播图高度范围内进行滚动的时候进行透明度渐变 0 - 1渐变
   2. 渐变值 使用滚动距离 / 轮播图的高度
   3. 添加滚动条滚动事件获取距离
   4. 获取轮播图高度
   5. 计算透明度值
   6. 把透明度值设置到头部上
5. 倒计时效果
   1. 有一个总倒计时时间 分别显示时分秒 每隔1秒 总时间-- 更新页面
   2. 总时间 后台获取的（使用前端模拟了一下总时间）
      new Date(‘指定时间’) 获取到一个指定的时间(未来时间)
      new Date(); 获取当前时间
      总时间 = 未来时间 - 当前时间
      默认会隐式转换 提前转好使用getTime() 转成具体的毫秒数 1970.1.1:0:00:00 - 当前的时间的毫秒数
   3. 计算时分秒
      1. 时 总时间 / 3600 1小时3600秒 3600 / 3600 == 1小时 7200 / 3600 = 2小时
      2. 分 总时间 % 3600 / 60 1分钟60秒 有多少个60秒有多少分钟 但是可能超过60分钟超过1小时 把小时部分去掉 % 3600 去掉小时部分
      3. 秒 总时间 % 60 1分钟 60秒 只要小于1分钟都算秒数 40 % 60 == 40 130 % 60 = 10
   4. 分别把时分秒十位个位显示到页面
      1. 十位 总数 / 10 10/10 == 1 90 / 10 == 9 有几个10 十位就是几
      2. 个位 总数 % 10 除不尽10的部分就是个位 15 % 10 == 5
   5. 如果时间到了根据业务去处理
6. 轮播图效果
   1. 轮播图的原理 让父元素进行水平(垂直)位移 添加过渡 慢慢移动 轮播图前后都要看到多加2张图片 第一张是最后一张 最后一张是第一张
   2. swiper轮播图插件的使用
      1. 引包 CSS JS
      2. 写结构

     <div class="swiper-container">

3. 修改样式 4. 初始化 调用Swiper构造函数创建实例 就是初始化 // 4. 调用JS的初始化函数初始化swiper var mySwiper = new Swiper('.swiper-container', { direction: 'horizontal', // 垂直切换选项 loop: true, // 循环模式选项 会自动在轮播图所有图片容器的最前面和最后面多放一张 第一张就是最后一张 最后一张就是第一张 //初始化自动轮播图 参数也是一个对象 autoplay: { delay: 3000, //间隔时间 stopOnLastSlide: false, //在最后一张是否要停止 如果开启loop模式无效 disableOnInteraction: false, // 是否要当(交互的时候)滑动的时候禁用自动轮播图 }, // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 // navigation: { // nextEl: '.swiper-button-next', // prevEl: '.swiper-button-prev', // },

         // 如果需要滚动条
         // scrollbar: {
         //     el: '.swiper-scrollbar',
         // },
     })

3. 如果要修改箭头样式 小圆点 检测元素改变类名对应里面的样式
4. 分类页面布局
   1. 上中下 头部 和 底部一样使用公共样式
   2. 中间 左边固定 右边自适应 flex布局
   3. 中间要居中 给body设置padding让内容挤到中间 给body设置100vh高度 中间100%只有整个高度-头-底部高度
5. 滑动插件的原理
   1. 有一个父容器
   2. 有一个子容器
   3. 子容器比父容器高(一定要比父容器才有必要滑动)
   4. 子容器在父容器里面进行位移
6. swiper滑动插件 使用方式
   1. 步骤和之前使用轮播图一样
   2. 修改样式
      swiper-container容器高度要固定 100%从父元素继承下来
      子元素的样式swiper-slide 的高度 改成auto
   3. 初始化
      // 初始化分类左侧的滚动
      new Swiper(’.category-left .swiper-container’, {
      //滑动方向
      direction: ‘vertical’,
      // 控制多屏滑动 内容滚动的原理就是多屏滚动
      slidesPerView: ‘auto’,
      // 支持鼠标拖动 滑动只有手机上才能滑动
      mousewheelControl: true,
      // 利用惯性自动滚动 松手后自动到顶部或者到底部
      freeMode: true,
      //防止文字模糊
      roundLengths: true
      });
      初始化需要指定一个参数
      核心就是 // 控制多屏滑动 内容滚动的原理就是多屏滚动
      slidesPerView: ‘auto’,
   4. swiper插件的原理 多了中间层
      以爷爷swiper-container作为容器
      swiper-wrapper作为父容器
      swiper-slide作为子容器
      因为要兼容轮播图 使用轮播图的结构
      间接通过父容器动了子容器在父容器里面也跟着动的