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

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

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

<swiper class="swiper" indicator-active-color="#fa2c19" indicator-color="#fff" duration="{{duration}}" circular="{{circular}}" autoplay="{{autoplay}}" interval="{{interval}}" indicator-dots="{{indicatorDot}}"><swiper-item><image src="https://inews.gtimg.com/news_ls/OAyGfj8q_u9hvn_h8InVmiTqjNaqzwZphygTCTwfhxYvgAA_870492/0" mode="widthFix"/></swiper-item><swiper-item><image src="https://inews.gtimg.com/news_ls/OPxz8FA21MwfVH3gNlRBe2Ps1puF7j9PNdnSZ-LT3F5RgAA_870492/0" mode="widthFix"/></swiper-item><swiper-item><image src="https://inews.gtimg.com/news_ls/OUkUW052LsZR4SEK19nU9fQqkJrLroMkYsPXR9p4LcTB8AA_870492/0" mode="widthFix"/></swiper-item></swiper>

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%;
}

好了，看效果

轮播图