小程序轮播图

   开发小程序时自己做的一个简单的轮播图，可以控制滑动速度等属性。

.wxml代码

<swiper indicator-dots="true" autoplay="{{autoplay}}" duration="{{duration}}" interval="{{interval}}">
    <view wx:for="{{banner}}" wx:key="banner">
      <swiper-item>
        <view>
          <navigator url="{{item.target}}"><image src="{{item}}" mode="scaleToFill center" class="banner"></image></navigator>
        </view>
      </swiper-item>
    </view>
  </swiper>

.wxss代码

.banner{
  width: 100%;
  height: 300rpx;
}

.js代码

  data: {
    banner:["/Images/Images/1.jpg",
    "/Images/Images/2.jpg",
    "/Images/Images/3.jpg"
    ],
    indicatorDots: true, //是否显示面板指示点
    autoplay: true, //是否自动切换
    interval: 3000, //自动切换时间间隔
    duration: 600, //滑动动画时长
    inputShowed: false,
    inputVal: "",
    inputShowed: false,  //初始文本框不显示内容
  },