vw布局和数组方法

一、vw布局

vw是什么？

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

vw有什么用？

• 让一个盒子充满屏幕

例如做一个遮罩层：
HTML:

<div class="mask">
    <div class="box"></div>
</div>

CSS:

.mask {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .5);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}
.mask .box {
    width: 600px;
    height: 400px;
    background: #00b38a;
}

• rem响应式布局

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

html {
  font-size: 13.333vw;
}

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

二、补充数组方法

let ary = [1, 2, 5, 6, 10];

• 数组.filter(function (item, index) {return 条件})过滤，把满足条件，即回调函数return true的项拿出来组成一个新数组；原数组不变；

let r1 = ary.filter((item, index) => item >= 6);

• 数组.every(function (item, index) {return 条件}):用来验证数组的每一项是否满足某个条件（条件就是回调函数返回值），如果每一个都满足条件就会返回true，否则返回false；

let result = ary.every(function (item, index) {
    return item > 3;
});
console.log(result);

• 数组.some(function (item, index) {return 条件})：验证数组中是否有一些向满足条件，满足就会返回true，否则false；

let r2 = ary.some(function (item, index) {
    return item > 3
});
console.log(r2);

• 数组.find(function (item, index) {return 条件})：查找数组中满足条件的第一项，找到第一个就返回，如果有多个都满足条件也只是获取第一个；如果没找到返回undefined【注意找到返回数组项，不是新数组】

let r3 = ary.find(function (item, index) {
    return item > 30;
});
console.log(r3);

三、swiper插件

• 引入swiper的css

<link rel="stylesheet" href="css/swiper.min.css">

• HTML代码

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="banner/banner1.jpg" alt=""></div>
        <div class="swiper-slide"><img src="banner/banner2.jpg" alt=""></div>
        <div class="swiper-slide"><img src="banner/banner3.jpg" alt=""></div>
        <div class="swiper-slide"><img src="banner/banner5.jpg" alt=""></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

• 引入JS

<script src="js/swiper.min.js"></script>

• 初始化swiper

var mySwiper = new Swiper('.swiper-container', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项
        effect: 'fade',
        autoplay: true,
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
    })