我们都知道，轮播图组件模板结构通常是ul包裹li的结构，在vue中，li的数量也通常是由后端接口返回的数据决定。所以封装轮播图组件，在搭建完基本的结构之后，首先就要获取到渲染模板的数据。
如果轮播图组件是单独封装的组件，那么后端接口的数据是通过自定义属性由父组件传递过来的，所以在这里我们只需要通过props接收数据即可，之后将数据遍历渲染在模板中。
①结构搭建
<template>
<div class="carousel">
<ul class="carousel-body">
// li中包裹可以点击的图片以及链接，因为一般图片都是可以点击跳转的
<li class="carousel-item ">
<RouterLink to="/">
<img v-lazyload=" " alt="" />
</RouterLink>
</li>
</ul>
// 左右的两个箭头链接
<a href="javascript:;" class="carousel-btn prev"><i class="iconfont icon-angle-left"></i> </a>
<a href="javascript:;" class="carousel-btn next" ><i class="iconfont icon-angle-right"></i> </a>
// 轮播图底部的小圆点
<div class="carousel-indicator">
<span ></span>
</div>
</div>
</template>
②数据的准备与使用
结构中的li和span标签是需要遍历渲染的，所以需要v-for循环数据，而数据需要在props中定义，供模板使用（sliders:数据；autoPlay：是否自动播放；duration：切换图片的间隔时间）
需要由父组件传递的属性
遍历进行图片的铺设渲染
遍历数组长度渲染底部小圆点
③显示图片是通过给图片添加类名实现，css样式 就是图片默认都是透明度为0，然后将当前图片的透明度改为1，权重也是1--------我们要搞清楚，其实每个图片都被遍历摆在那里，我们要做的是通过改变index的值，给对应的图片添加类名，然后让对应的图片显示出来而已
css样式
模板类名的使用
这里涉及到给标签添加类名 ：class=' { 类名：条件 } '
显示与当前index值相同的数据，index是动态的，index也为1时，那么就显示索引为1的那条数据的图片，index是通过ref定义的响应式数据，默认值为0
④底部的小圆点也是同理，也是添加类名，小圆点都遍历出来摆在那里，通过改变index的值，让对应的小圆点添加类名，赋予css样式
底部小圆点添加类名
遍历的是数组的长度，所以i是从1开始计数的，index又是从0开始累加，所以需要将index与i-1进行比较，给与index值对应的小圆点添加样式
⑤轮播图图片动态切换的实现是需要用到定时器的，每隔一段时间让index+1,随之对应的图片也会被添加上fade类名，从而将图片显示出来。当index大于索引值的值那么就手动修改index的值为0
通过定时器操作index，从而完成图片的切换
⑥点击左右的按钮实现图片的手动切换
分别给按钮添加点击事件，并且传入用于区分按钮以及事件操作的参数，上一页传入-1,下一页1，点击相对应的按钮，就让index与传过来的参数的值累加，如果值大于等于数组长度，也就是大于等于数组的最大索引值，就手动给index赋值为0，如果小于0，那么就手动赋值为数组最后一条数据对应的索引值(arr.length-1)
模板
点击按钮实现轮播js
⑦鼠标进入图片停止轮播，离开开始轮播
给盒子绑定鼠标进入和鼠标离开事件，鼠标进入就清除定时器
模板
鼠标离开如果数组中有数据并且自动播放属性值为true，调用上面封装的自动轮播函数
鼠标进入离开控制轮播
⑧侦听器侦听props中的数据
轮播图组件在别的组件可能也会被用到，那个组件中和之前的可能调用的不是一个接口，那么也可能不是同一组数据，所以要对数据进行监听，数据发生变化就要重新调用autoPlay函数，并且立即执行
立即执行，函数形式传参
⑨组件销毁时，清理资源
当用户不再浏览轮播图时，可以对轮播图进行销毁处理，在onUnmounted生命周期中对定时器进行清除
清理资源
网友评论