小程序首页轮播图设计

效果图

微信小程序的数据详解

indicator-dots：是否显示面板指示点【默认false  】

indicator-color：指示点颜色【默认rgba(0, 0, 0, .3)】

indicator-active-color：当前选中的指示点颜色【默认#000000】

autoplay：是否自动切换【默认false】

interval：自动切换时间间隔【默认5000】

duration：滑动动画时长【默认500】

circular：是否采用衔接滑动【默认false】

vertical：滑动方向是否为纵向【默认false】

源码如下 

index.wxml

index.wxss

.index-header {
  background-image: linear-gradient(to bottom right, rgb(114, 135, 254), rgb(130, 88, 186));
  width: 100%;
  height: 190px;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
}
.index-swiper{
  padding: 10px;
}
.swiper-img {
  height: 140px;
}