小程序 | 365笔记第1天 | 轮播图

在制作轮播图之前，先了解一下swiper组件的常用参数；

swiper滑块视图容器。
属性名类型默认值说明最低版本
indicator-dots Booleanfalse是否显示面板指示点;
indicator-colorColor rgba(0, 0, 0, .3)指示点颜色[1.1.0];
indicator-active-colorColor #000000当前选中的指示点颜色[1.1.0];
autoplay Booleanfalse是否自动切换;
current Number0当前所在滑块的 index;
interval Number5000自动切换时间间隔；
duration Number500滑动动画时长；

从基础库 1.4.0 开始支持，低版本需做兼容处理。") 开始，change事件返回detail中包含一个source字段，表示导致变更的原因，可能值如下：

• autoplay 自动播放导致swiper变化；
• touch 用户划动引起swiper变化；
• 其他原因将用空字符串表示。
  注意：其中只可放置<swiper-item/>组件，否则会导致未定义的行为。

Swiper-item组件
仅可放置在<swiper/>组件中，宽高自动设置为100%；

一、制作一个轮播图；

wxml部分
<swiper indicator-dots="true" indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="#000000" autoplay="true" interval="4000" duration="500" class="w-480" vertical='true'>
<swiper-item"> <image class="width-full" src="/images/swiper01.jpg"></image> </swiper-item>
<swiper-item> <image class="width-full" src="/images/swiper02.jpg"></image> </swiper-item>
<swiper-item> <image class="width-full" src="/images/swiper03.jpg"></image> </swiper-item>
<swiper-item> <image class="width-full" src="/images/swiper04.jpg"></image> </swiper-item>
<swiper-item> <image class="width-full" src="/images/swiper05.jpg"></image> </swiper-item>
<swiper-item> <image class="width-full" src="/images/swiper06.jpg"></image> </swiper-item>
<swiper-item> <image class="width-full" src="/images/swiper07.jpg"></image> </swiper-item>
</swiper>

wxss部分
.w-480{ height:480rpx; }
.width-full{ width:100%; height:430px; }

二、轮播图左右滑动(默认);

左右滑动.png

三、轮播图上下滑动；

给 swiper设置vertical='true';

上下滑动.png

四、让指示点显示在图片下面；

设置swiper的height大于图片的height；

指示点在图片下面.png

也可以实现指示点隐藏起来；
当然使用scroll-view组件也是可以实现轮播图的；
每天利用空闲时间弄懂一个知识点，继续加油！