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滑块后，它是滑块试图容器，不止可以实现图片轮播效果，它还有很多的属性，也可以继续去探索。
