微信小程序学习之轮播图swiper

轮播图是小程序的重要组件，我们还是好好学滴。

1、上代码，直接布局一个轮播图组件(index.wxml)：

2、轮播图属性的讲解：

indicator-active-color   当前播放页下面指示点的颜色

indicator-color   轮播图下面对应点的颜色

duration   图片切换时动画的播放时间

autoplay   自动切换

circular   采用衔接滑动

interval   切换时间间隔

indicator-dots  显示面板指示点

3、属性的赋值（index.js）

Page({
  data: {
    value:'',
    indicatorDot:true,
    autoplay:true,
    interval:3000,
    circular:true,
    duration:1000,
  },
  
})

4、相关样式（index.wxss）

.swiper{
  padding: 0 10rpx;
}

image{
  width: 100%;
}

好了，看效果

轮播图