珠峰培训，专注前端

vw布局和数组方法

一、vw布局

vw是什么？

vw和vh是新增加的单位，是将视口的宽度分为100份，1份宽叫做1vw；高分为100份，每份高叫做1vh。

vw有什么用？

  • 让一个盒子充满屏幕

例如做一个遮罩层：
HTML:

  1. <div class="mask">
  2.     <div class="box"></div>
  3. </div>

CSS:

  1. .mask {
  2.     width: 100vw;
  3.     height: 100vh;
  4.     background: rgba(0, 0, 0, .5);
  5.     position: fixed;
  6.     top: 0;
  7.     left: 0;
  8.     display: flex;
  9.     justify-content: center;
  10.     align-items: center;
  11.     z-index: 999;
  12. }
  13. .mask .box {
  14.     width: 600px;
  15.     height: 400px;
  16.     background: #00b38a;
  17. }
  • rem响应式布局

过往我们使用js动态计算html的fontSize，有了vw可以使用vw来计算；
例如设计稿宽750px，相当于页面在750px的设备上，此时html的font-size是100px；使用vw表示：

  1. html {
  2.   font-size: 13.333vw;
  3. }

写上以上代码后，就不需要再用js设置html的font-size；

二、补充数组方法

  1. let ary = [1, 2, 5, 6, 10];
  • 数组.filter(function (item, index) {return 条件})过滤，把满足条件，即回调函数return true的项拿出来组成一个新数组；原数组不变；
  1. let r1 = ary.filter((item, index) => item >= 6);
  • 数组.every(function (item, index) {return 条件}):用来验证数组的每一项是否满足某个条件（条件就是回调函数返回值），如果每一个都满足条件就会返回true，否则返回false；
  1. let result = ary.every(function (item, index) {
  2.     return item > 3;
  3. });
  4. console.log(result);
  • 数组.some(function (item, index) {return 条件})：验证数组中是否有一些向满足条件，满足就会返回true，否则false；
  1. let r2 = ary.some(function (item, index) {
  2.     return item > 3
  3. });
  4. console.log(r2);
  • 数组.find(function (item, index) {return 条件})：查找数组中满足条件的第一项，找到第一个就返回，如果有多个都满足条件也只是获取第一个；如果没找到返回undefined【注意找到返回数组项，不是新数组】
  1. let r3 = ary.find(function (item, index) {
  2.     return item > 30;
  3. });
  4. console.log(r3);

三、swiper插件

  • 引入swiper的css
  1. <link rel="stylesheet" href="css/swiper.min.css">
  • HTML代码
  1. <div class="swiper-container">
  2.     <div class="swiper-wrapper">
  3.         <div class="swiper-slide"><img src="banner/banner1.jpg" alt=""></div>
  4.         <div class="swiper-slide"><img src="banner/banner2.jpg" alt=""></div>
  5.         <div class="swiper-slide"><img src="banner/banner3.jpg" alt=""></div>
  6.         <div class="swiper-slide"><img src="banner/banner5.jpg" alt=""></div>
  7.     </div>
  8.     <!-- 如果需要分页器 -->
  9.     <div class="swiper-pagination"></div>
  11.     <!-- 如果需要导航按钮 -->
  12.     <div class="swiper-button-prev"></div>
  13.     <div class="swiper-button-next"></div>
  15. </div>
  • 引入JS
  1. <script src="js/swiper.min.js"></script>
  • 初始化swiper
  1. var mySwiper = new Swiper('.swiper-container', {
  2.         direction: 'horizontal', // 垂直切换选项
  3.         loop: true, // 循环模式选项
  4.         effect: 'fade',
  5.         autoplay: true,
  6.         // 如果需要分页器
  7.         pagination: {
  8.             el: '.swiper-pagination',
  9.         },
  11.         // 如果需要前进后退按钮
  12.         navigation: {
  13.             nextEl: '.swiper-button-next',
  14.             prevEl: '.swiper-button-prev',
  15.         }
  16.     })

【发上等愿，结中等缘，享下等福，择高处立，寻平处住，向宽处行】