小程序swiper配置参数使用

无论什么项目,一个轮播是基本少不了的,如今就来踩下微信小程序的swiper吧!html

首先打开文档,能够看到下面这些参数:(https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html)小程序

后面有详细的解说,我就不一一说了!主要看下面的!微信小程序

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" class="slide-image" width="355" height="150"/> </swiper-item> </block> </swiper>
变量设置在data当中

将默认的宽高去掉,而后给个样式!

默认指示点是为false的,咱们要改为true

修改指示点的颜色:

indicator-color="white" indicator-active-color="#cccccc"
 
一个简单的轮播就行了!
相关文章
相关标签/搜索