微信小程序轮播图

微信小程序页面逻辑和app比较相似，虽然看上去很像html，但其实小程序封装了很多页面功能模块，可以直接调用。这里说一下小程序的轮播效果。

小程序轮播图用的标签是<swiper>相当于oc的UIScrollerView。小程序还有一个标签是<scroll-view>，相当于oc的UITableView。小程序开发团队是不是和oc有仇？？？

先上代码，这个是纵向滚动的文字效果代码：

<swiper indicator-dots='{{false}}' autoplay='{{true}}' circular='{{true}}' vertical='{{true}}' interval='{{2000}}' duration='{{500}}' previous-margin='{{0}}px' next-margin='{{0}}px' style='height:100%;'>
    <block wx:for="{{infoText}}">
        <swiper-item style='margin:0.5rem auto auto auto;'>
           <text style='color:#F15453; font-size:0.7rem;'>{{item}}</text>
        </swiper-item>
    </block>

</swiper>

swiper组件的参数：

indicator-dots	是否显示面板指示点
autoplay	是否自动切换
circular	是否采用衔接滑动
vertical	滑动方向是否为纵向
interval	自动切换时间间隔
duration	滑动动画时长
previous-margin	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
next-margin	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值

swiper组件内容设置infoText就可以，item不用设值，组件会自动轮循infoText设置item。在相应的.js文件里设置infoText，必须是数组格式。

下面是横向的轮播效果代码：

.wxml文件：

<swiper indicator-dots="{{false}}" autoplay="{{true}}" circular="{{true}}" vertical="{{false}}" previous-margin="{{0}}px" next-margin="{{0}}px" interval="{{2000}}" duration="{{500}}">
  <block wx:for="{{imgUrls}}">
     <swiper-item>
       <image src="{{item}}" class="slide-image" style='width:100%; height:100%;'/>
     </swiper-item>
   </block>

 </swiper>

.js文件：

Page({
  data: {
    imgUrls: [
      "/image/ad0.png",
      "/image/ad1.png",
      "/image/ad3.png"
    ],