前端必知：使用Swiper实现一份H5界面！希望这篇教程能对你有所帮助，能激发你更多的创意，制作出更有趣、更具吸引力的H

引言：

今天我学习了如何使用Swiper这个强大的移动端触控滑动插件，创建一个具有音乐播放功能的单屏滑动H5页面。而接下来，你也将学会如何搭建这样一个页面，包括页面结构设计、样式美化、音乐控制等功能的实现。让我们一起探索如何利用现代前端技术，打造一个既美观又实用的H5音乐页面吧！

话不多说，先放效果图：

准备工作

Swiper的相关介绍

Swiper 是一个功能强大且灵活的移动触摸滑动插件，专为手机、平板等移动设备设计。它提供了丰富的功能和高度的定制性，使其成为开发移动应用和网站时不可或缺的工具之一。

SWiper的特点：

硬件加速：Swiper 使用硬件加速的CSS3转换，确保滑动效果流畅且高效，特别是在移动设备上表现尤为出色。
多方向滑动：支持水平和垂直滑动，可以根据需求自由选择滑动方向。
多种布局模式：提供多种布局模式，如普通滑动、自由模式、3D立方体、翻转效果等，满足不同场景的需求。
响应式设计：自动适应不同屏幕尺寸，确保在各种设备上都能获得良好的用户体验。

Swiper的引入

使用link引入 Swiper的CSS文件，然后使用script引入Swiper的JS文件，这些都可以通过CDN链接快速引入：

<!-- Swiper CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<!-- Swiper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>

其中Swiper CSS最好放在其他link文件之上，可以避免因加载顺序问题导致的样式冲突或覆盖、浏览器可能需要多次重绘和回流页面等问题。Swiper JS放在其他script文件之前，拥有避免执行错误、减少阻塞、明确依赖关系等优点。

设计稿的尺寸：标准iPhone手机的设计稿尺寸为750px=，因为Retina屏的像素比例为2所以逻辑宽度为375px。

HTML结构的建立

我的HTML结构相对简单，主要包含Swiper容器和音乐控制按钮：

<audio id="j-bgm" src="./bgm.mp3"></audio>
    <div class="next-view-c"></div>
    <div class="music-btn off"></div>
    <!-- 滑页操作 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="view index">
                    <div class="logo-c"></div>
                </div>
            </div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
        </div>
    </div>

这里定义了audio音频元素，next-view-c下一页指示器，music-btn off音乐控制按钮,swiper-container滑页操作等完成页面需要元素。其中class="music-btn off中music-btn: 这是音乐控制按钮的基本类名，用于应用基本的样式。off: 这是一个附加的类名，表示按钮当前处于关闭状态。

CSS样式的书写

为了使页面更加美观，我们需要对Swiper的基本样式进行一些调整，并添加特定的页面元素样式，以下是简单的样式代码：

* {
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
}

.music-btn {
    z-index: 999;
    position: fixed;
    top: 25px;
    left: 25px;
    width: 40px;
    height: 40px;
    background: url(./assert/close.png) no-repeat center / cover;
}

.music-btn.off {
    background-image: url(./assert/music.png);
}

/* 单屏滑屏H5 效果 */
.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    background-color: green;
}

.swiper-slide:nth-child(odd) {
    background-color: pink;
}

.next-view-c {
    position: fixed;
    left: 50%;
    bottom: 10px;
    width: 13px;
    height: 86px;
    z-index: 999;
    background: url(http://s5.music.126.net/static_public/5c21db8d4684556c72180904/gx.4ae36e08269404412ecdb99e9453ca17.svg);
    background-size: 100%;
    transform: translate3d(-50%, 0, 0);
}

.view {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.view.index {
    background: url(http://s5.music.126.net/static_public/5c21db8d4684556c72180904/bgg.d78404cec29e5275598b87d1716f0592.png);
    position: absolute;
    background-position: center;
    background-size: cover;
}

.logo-c {
    position: absolute;
    top: 5.6%;
    right: 15%;
    width: 186px;
    height: 218px;
    background: url(http://s5.music.126.net/static_public/5c21db8d4684556c72180904/title@2x.7c87506dfb012b9dfac5fdd39e2ccb06.png) no-repeat;
    background-size: 100%;
}

关键点总结

通用样式重置：确保页面布局的一致性和可预测性。
HTML 和 Body 样式：确保它们占据整个视口。
音乐控制按钮：设置按钮的基本样式和关闭状态的背景图像。
Swiper 容器和滑动项：设置容器和滑动项的样式，包括背景颜色。
下一页指示器：设置指示器的位置、大小和背景图像。
第一页容器：设置视图容器的宽度、高度和内容隐藏。
首页视图：设置首页视图的背景图像和居中对齐。
Logo：设置Logo的位置、大小和背景图像。

为什么使用 `translate3d` 而不是 `translate`？

性能优化：translate3d 可以触发GPU加速，特别是在移动设备上，这可以显著提升动画和变换的性能，虽然现代浏览器对 translate 和 translate3d 都有很好的支持，但 translate3d 在某些情况下可以提供更好的性能。
精确控制：即使在不需要实际的三维效果时，translate3d 也提供了更精确的控制，特别是在复杂的布局和动画中。

JS的建立代码

为了让音乐播放按钮能够正常工作，我们需要在JavaScript中添加相应的逻辑来控制音频的播放与暂停。这里使用了事件监听器来实现：

 // dom 编程  操作dom  操作元素
        const audio = document.getElementById('j-bgm');
        // 选择器
        const musicBtn = document.querySelector('.music-btn');
        // 点击音乐按钮  播放音乐  切换音乐按钮的样式
        musicBtn.addEventListener('click', function () {
            if (audio.paused) {
                audio.play();
            } else {
                audio.pause();
            }
            musicBtn.classList.toggle('off');
        })
        // 滑屏效果
        new Swiper('.swiper-container', {
            direction: 'vertical'
        })

一些小细节：

选择器
- document.getElementById：适用于通过ID快速获取单个元素。
- document.querySelector：适用于通过各种CSS选择器选择单个元素，更加灵活。
toggle 方法：用于在元素的类列表中添加或移除指定的类名。
- 作用：根据类名的存在与否自动切换状态，非常适合用于切换元素的样式或行为。
- 使用场景：常见的使用场景包括切换可见性、切换按钮状态、切换动画效果等。

结语

通过上述步骤，我们成功地创建了一个带有音乐播放功能的单屏滑动H5页面。在这个过程中，Swiper帮助我们轻松实现了页面间的平滑切换，而自定义的CSS样式则让页面看起来更加吸引人。希望这篇教程能对你有所帮助，能激发你更多的创意，制作出更有趣、更具吸引力的H5页面。

前端必知：使用Swiper实现一份H5界面！

引言：