手动封装轮播图组件（Vue3）

Posted 2023-05-05

参考技术A 我们都知道，轮播图组件模板结构通常是 ul包裹li 的结构，在vue中，li的数量也通常是由后端接口返回的数据决定。所以封装轮播图组件，在搭建完基本的结构之后，首先就要获取到渲染模板的数据。

如果轮播图组件是单独封装的组件，那么后端接口的数据是通过自定义属性由父组件传递过来的，所以在这里我们只需要通过props接收数据即可，之后将数据遍历渲染在模板中。

①结构搭建

②数据的准备与使用

结构中的li和span标签是需要遍历渲染的，所以需要v-for循环数据，而数据需要在props中定义，供模板使用（sliders:数据；autoPlay：是否自动播放；duration：切换图片的间隔时间）

③显示图片是通过给图片添加类名实现，css样式 就是图片默认都是透明度为0，然后将当前图片的透明度改为1，权重也是1--------我们要搞清楚，其实每个图片都被遍历摆在那里，我们要做的是通过改变index的值，给对应的图片添加类名，然后让对应的图片显示出来而已

这里涉及到给标签添加类名 ：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

⑥点击左右的按钮实现图片的手动切换

分别给按钮添加 点击 事件，并且 传入 用于区分按钮以及事件操作的 参数 ，上一页传入 -1, 下一页 1 ，点击相对应的按钮，就让index与传过来的参数的值累加，如果值大于等于数组长度，也就是大于等于数组的最大索引值，就手动给index赋值为0，如果小于0，那么就手动赋值为数组最后一条数据对应的索引值(arr.length-1)

⑦鼠标进入图片停止轮播，离开开始轮播

给盒子绑定鼠标进入和鼠标离开事件，鼠标进入就清除定时器

鼠标离开如果数组中有数据并且自动播放属性值为true，调用上面封装的自动轮播函数

⑧侦听器侦听props中的数据

轮播图组件在别的组件可能也会被用到，那个组件中和之前的可能调用的不是一个接口，那么也可能不是同一组数据，所以要对数据进行监听，数据发生变化就要重新调用autoPlay函数，并且立即执行

⑨组件销毁时，清理资源

当用户不再浏览轮播图时，可以对轮播图进行销毁处理，在 onUnmounted 生命周期中对定时器进行清除

为啥vue移动端轮播图的组件安装后没法使用？

我的vue的移动端轮播图组件安装后怎么没法使用

参考技术A import了吗，在当前页面， 或者检查下 package.json里面有没有安装成功。