|
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./img/H5/web/banner/banner23.jpg" mode=""></image>
</view>
</swiper-item>
<swiper-item>
<view>
<image src="https://app-file./img/H5/web/banner/banner22.jpg" mode=""></image>
</view>
</swiper-item>
<swiper-item>
<view>
<image src="https://app-file./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滑块后，它是滑块试图容器，不止可以实现图片轮播效果，它还有很多的属性，也可以继续去探索。
|
