Vue实现简单图轮播效果

淡淡的烟草味﹌ 2022-09-16 08:43 211阅读 0赞

**1** **问题描述**

在用vue做页面设计时，首页经常会用到图片轮播效果，在之前讲slider滑块，那么如何用swiper滑块实现图片轮播呢？

**2** **算法描述**

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。因此在用image时，要先写swiper组件的swiper-item组件，才能插入图片。

<table> 
 <tbody> 
  <tr> 
   <td>&lt;view&gt;<br>&lt;swiper :indicator-dots="indicatorDots" :indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor" :autoplay="autoplay" :interval="interval" :duration="duration"&gt;<br> &nbsp; &nbsp; &lt;swiper-item&gt;<br> &nbsp; &nbsp; &nbsp; &nbsp; &lt;view&gt;<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;image src="https://app-file.beitaichufang.com/img/H5/web/banner/banner23.jpg" mode=""&gt;&lt;/image&gt;<br> &nbsp; &nbsp; &nbsp; &nbsp; &lt;/view&gt;<br> &nbsp; &nbsp; &lt;/swiper-item&gt;<br> &nbsp; &nbsp; &lt;swiper-item&gt;<br> &nbsp; &nbsp; &nbsp; &nbsp; &lt;view&gt;<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;image src="https://app-file.beitaichufang.com/img/H5/web/banner/banner22.jpg" mode=""&gt;&lt;/image&gt;<br> &nbsp; &nbsp; &nbsp; &nbsp; &lt;/view&gt;<br> &nbsp; &nbsp; &nbsp;&lt;/swiper-item&gt;<br> &nbsp; &nbsp; &nbsp;&lt;swiper-item&gt;<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;view&gt;<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;image src="https://app-file.beitaichufang.com/img/H5/web/banner/banner20.jpg" mode=""&gt;&lt;/image&gt;<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/view&gt;<br> &nbsp; &nbsp; &nbsp;&lt;/swiper-item&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br> &nbsp; &lt;/swiper&gt;<br>&lt;/view&gt;</td> 
  </tr> 
 </tbody> 
</table>

再在scrip中写入方法，实现轮播。indicatorDots是否面板显示指示点autoplay是否自动播放，默认值是false，对切换间隔时长的设置interval，duration滑动动画时长。

<table> 
 <tbody> 
  <tr> 
   <td>&lt;script&gt;<br> &nbsp;export default { <br> &nbsp; &nbsp;data() { <br> &nbsp; &nbsp; &nbsp; &nbsp; return { <br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;indicatorDots: true,<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;autoplay:true,<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;interval: 3000,<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;duration: 500,<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;indicatorColor:"#292b40",<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},<br> &nbsp; &nbsp; &nbsp; &nbsp; }<br>&lt;/script&gt;</td> 
  </tr> 
 </tbody> 
</table>

最后可以对图片的样式做一些设置，使其体验效果较好。

<table> 
 <tbody> 
  <tr> 
   <td>&lt;style lang="scss"&gt;<br> &nbsp; &nbsp;reg-img { <br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width: 720rpx;<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;height: 316rpx;<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;margin-right:10rpx;<br> &nbsp;&nbsp; margin-left: 10rpx;<br> &nbsp;border-radius: 20rpx;<br> }<br>&lt;/style&gt;</td> 
  </tr> 
 </tbody> 
</table>

效果图

![1b2db5f3d398ec6312e1081478e4aa12.png][]

**3问题总结**

学习了swiper滑块后，它是滑块试图容器，不止可以实现图片轮播效果，它还有很多的属性，也可以继续去探索。

稿件来源：深度学习与文旅应用实验室（DLETA）

[1b2db5f3d398ec6312e1081478e4aa12.png]: /images/20220828/3fb83dde6372452d82517aaad36d6134.png