查看“小程序轮播组件”的源代码

===swiper组件===
滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

[[文件:wx4-15.png]]

===swiper-item===

仅可放置在swiper组件中，宽高自动设置为100%。

 <nowiki>属性 	类型 	默认值 	必填 	说明 	最低版本
item-id 	string 		否 	该 swiper-item 的标识符 	1.9.0</nowiki>

==案例==
效果图：

[[文件:wx4-16.png]]
===网页文件index.wxml===

 <nowiki><!--pages/swiper/swiper.wxml-->
<view>
    <swiper autoplay="true" interval="2000"
    indicator-dots="true" >
    <block wx:for="{{background}}" wx:key='swip' >
        <swiper-item>
            <view class='si {{item}}'></view>
           
        </swiper-item>
    </block>
    </swiper>
</view></nowiki> 

===CSS文件===

 <nowiki>/* pages/swiper/swiper.wxss */
.si{
    display:block;
    height:150px;
       
}
.a{
    background-color:yellow;    
}
.b{
    background-color:red;
}
.c{
    background-color:blue;
}
</nowiki>

===JS文件（数据绑定）===
 <nowiki>// pages/swiper/swiper.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    background: ['a', 'b', 'c']
  },
</nowiki>