Vue封装Swiper实现图片旋转

时间：2021-09-01 来源：互联网编辑：宝哥软件园浏览：次

图片轮播是一个经常需要在前端实现的功能。最近学习了Vue.js，封装了Swiper实现了一个简单的图片轮播组件。

一.瑞士

在实现封装之前，让我们介绍一下Swiper。

Swiper是纯Javascript创建的滑动特效插件，针对手机、平板电脑等移动终端。Swiper可以实现触摸屏聚焦地图、触摸屏Tab切换、触摸屏多地图切换等常见效果。Swiper开源、免费、稳定、易用、功能强大，是构建移动终端网站的重要选择。Swiper应用场景广泛，取得了不错的效果。下面的实际案例是Swiper的典型应用场景。

有关Swiper的具体教程和详细API，请参考Swiper中文网站。

第二，Vue组件

Vue组件设计的初衷是与它合作，提高可维护性和可重用性。而照片轮播正好适合用组件来完成，所以在介绍具体实现之前，我们先介绍一下Vue组件和组件通信。

Vue中最常见的组件是父子关系：组件a在其模板中使用组件b。

它们必须相互通信：父组件可以向子组件发送数据，子组件可以通知父组件它内部发生了什么。但是，通过定义良好的接口尽可能地分离父组件和子组件也很重要。这确保了每个组件的代码可以在相对隔离的环境中编写和理解，从而提高了其可维护性和可重用性。

在Vue中，父组件和子组件之间的关系可以概括为道具向下传递和事件向上传递。父组件通过prop向子组件发送数据，子组件通过事件向父组件发送消息。

第三，包装实施

1.介绍Swiper

首先，你需要安装Swiper。

Npm安装-保存swiper然后，引用两个文件。

从“Swiper”导入Swiper；导入“swiper/dist/CSS/swiper . min . CSS”；

2.HTML代码

在模板中设置转盘的html布局。

template div class=' swiper-container ' : class=' swipe id ' div class=' swiper-wrapper '！-存储特定的转盘内容-插槽名称=' wiper-con '/插槽/div！-Pager-div : class=' { ' wiper-paging ' : paging } '/div/div/template，其中使用了命名槽来改善解耦，这样在使用父组件时可以根据不同情况设置不同的轮播内容。

此外，还需要设置分页装置，即照片旋转中的页面指示器，如小圆点或数字指示器。

3.初始化Swiper

由于Swiper是封装实现轮播图的，之前已经安装了Swiper，所以现在需要初始化使用。

初始化之前，根据对Swiper用法的理解，确定轮播组件需要的属性信息，然后通过父组件传递给封装好的Swiper组件。

那是需要道具的时候。

prop : { swipeid : { type : String，default: '' }，effect: { type: String，default: 'slide' }，loop: { type: Boolean，default: false }，direction : { type 3: String，default: ' horizontal ' }，Pagination 3: { type 3: Boolean

属性的意思是旋转圆盘传送带容器的类属性的类名。效果图的切换效果默认为“滑动”，也可以设置为“渐变”、“立方体”、“溢出”和“翻转”。详见效果。将循环设置为true以打开循环模式。循环模式：会在原图前后拷贝几张图，适当的时候切换，让Swiper看起来是循环的。有关详细信息，请参见循环。方向图片的滑动方向可以设置为水平或垂直。详见方向。分页使用分页导航，详细信息请参见分页。分页样式类型分页样式类型，可以设置为‘项目符号’、‘分数’、‘进度条’、‘自定义’。有关详细信息，请参见类型。自动播放设置为真，开始自动切换并使用默认切换设置。有关详细信息，请参见自动播放。了解以上每个属性的含义后，您可以初始化Swiper并设置特定的属性。

初始化Swiper时需要传入两个参数。

转盘容器的类名表示图片转盘组件的详细功能的对象变量；这个。DOM=新雨刮器('.'那个。swipe id，{//loop loop: that.loop，//寻呼机分页： { El : }。wiper-paging '，Bullet类：' swing-paging-bullet '，}，//paging类型3360。分页类型，//自动播放自动播放。//direction :that.direction，//special effect : that . effect，//用户操作雨刮器后，不禁止autoplay disable on intervention 3360 false，//修改雨刮器本身或其子元素时，自动初始化swiperobserver 3360 true，//修改swiper的父元素时，自动初始化swiperobserver的父元素： true }；}第四，自定义轮播效果

完成上述步骤后，包装转盘。我们可以自定义我们想要的旋转木马效果。我们以知乎的API为例，实现图像轮播。

1.HTML代码

m-swipe swipe id=' swipe ' ref=' swiper ' : autoplay=' 3000 ' effect=' slide ' div v-for=' top in tops ' : key=' top . id ' class=' swiper-slide ' slot=' swiper-co N ' img : src=' http : top . image ' H3 { { top . title } }/H3/div/m-swipe必须首先引用注册的组件，所以这里不做详细介绍。

其中，m-swipe是上面实现的图片轮播组件，子组件是通过命名槽插入的轮播内容。

2.CSS代码。swiper-container { width : 100%；} .swiper-slide { height : 8 rem；飞越：隐藏；相对位置：}.swiper-slide { div { top : 0；left : 0；宽度： 100%；高度： 100%；opacity: 0.4绝对位置：背景-color : @蓝色；} img { top : 50%；相对位置：transform: translate(0，-50%)；} H3 { width : 70%；color: # fffmargin : 0；font-size : 0.5 rem；线高： 1毫米；right : 5%；bottom: 2.6remtext-align:右侧；绝对位置：text-shadow : 1px 1px 10px rgba(0，0，0，0.5)；在{ content : }之前；宽度： 3毫米；bottom :-0.6 rem；right : 0；display:块；绝对位置：border: 2px实心@黄色；} }}.swiper-paging-bullet-active { background : # fff；}.swiper-集装箱-水平。swiper-paging-bullets { bottom : 1 rem；宽度：95%；text-align:右侧；}其中swipe-paging-bullet-active表示寻呼机中当前指示的点的类名。游标分页项目符号表示分页器的类名。有关详细信息，请参见分页页导航中元素的类名。

关于网络请求数据显示的代码没有发布，下面有源代码地址。

3.影响