Vue实现简单图轮播效果

Posted 2021-11-06 算法与编程之美

1 问题描述

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

2 算法描述

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

<view> <swiper :indicator-dots="indicatorDots" :indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor" :autoplay="autoplay" :interval="interval" :duration="duration">     <swiper-item>         <view>              <image src="https://app-file.beitaichufang.com/img/H5/web/banner/banner23.jpg" mode=""></image>         </view>     </swiper-item>     <swiper-item>         <view>              <image src="https://app-file.beitaichufang.com/img/H5/web/banner/banner22.jpg" mode=""></image>         </view>      </swiper-item>      <swiper-item>          <view>              <image src="https://app-file.beitaichufang.com/img/H5/web/banner/banner20.jpg" mode=""></image>          </view>      </swiper-item>                                       </swiper> </view>

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

<script>  export default {    data() {         return {                  indicatorDots: true,                  autoplay:true,                  interval: 3000,                  duration: 500,                  indicatorColor:"#292b40",                 }            },         } </script>

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

<style lang="scss">    reg-img {              width: 720rpx;              height: 316rpx;              margin-right:10rpx;    margin-left: 10rpx;  border-radius: 20rpx; } </style>

效果图

3问题总结

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

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