vue 实战：百度音乐项目

第9章 实战： 百度音乐项目

vueMusic

《Vue+Spring Boot前后端分离开发实战》

swiper 布局

page197

‌Swiper.js‌ 是一个开源的移动端触摸滑动库，主要用于创建响应式、可触摸滑动的轮播图、滑块、画廊和其他滑动组件。它支持网页、移动应用和桌面应用，具有丰富的功能和选项，能够轻松创建各种滑动效果和交互‌

主要功能和使用场景
Swiper.js 支持以下主要功能：

‌响应式布局‌：根据设备的尺寸和屏幕方向自动调整布局和显示效果。
‌触摸滑动‌：支持通过手指在屏幕上滑动来切换滑块或轮播图。
‌多种滑动效果‌：如淡入淡出、滑动、翻转等。
‌自动播放‌：支持设置轮播图自动播放的时间间隔。
‌分页器和导航按钮‌：提供方便的分页和导航功能。
‌嵌套滑动‌：支持在一个滑动组件内部嵌套其他滑动组件。
‌回调函数和事件‌：提供丰富的回调函数和事件，用于在滑动过程中触发自定义逻辑和操作。
‌支持扩展‌：通过插件和扩展增加更多功能和效果‌

安装和使用方法
要使用 Swiper.js，可以通过以下方式引入库文件：

从官方网站下载库文件并引入到项目中。可以选择下载完整版的 Swiper 或只下载需要的模块。
使用 npm 或 yarn 安装 Swiper.js：在项目根目录下运行以下命令：

npm install swiper
或

yarn add swiper
常见属性及方法
Swiper 组件包含多个子组件和属性，例如：

‌swiper-container‌：最外层的容器。
‌swiper-wrapper‌：按照一定顺序排列的所有轮播图的集合。
‌swiper-slide‌：每一张轮播图。
‌swiper-pagination‌：分页器导航（原点）。
‌swiper-button-prev‌ 和 ‌swiper-button-next‌：左右箭头按钮‌