Vue实现简单图轮播效果

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

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>

效果图

1b2db5f3d398ec6312e1081478e4aa12.png

3问题总结

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

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

发表评论

表情：
评论列表 （有 0 条评论，287人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue实现简单轮播图

    实现思路: 1. 将vue的框架封装在function中，在界面刷新时调用，将要轮播的图片存放在data中，还有下面的列表也分别保存在data中的一个数组中，然后每隔一

    比眉伴天荒比眉伴天荒/ 0 赞/ 458 阅读