wepy轮播图

示例理解

<template>
  <view>
   <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
      <repeat for="{{imgUrls}}">
        <swiper-item>
          <!--{{item}}-->
          <image src="{{item}}" class="slide-image" />
        </swiper-item>
      </repeat>
    </swiper>
    <!--或者-->
    <swiper style="height:400rpx" indicator-dots=true
            autoplay=true interval=2000 duration=500 circular=true >
      <block wx:for="{{imgUrls}}">
        <swiper-item>
          <image src="{{item}}" class="slide-image" style="width:100%;height:400rpx"/>
        </swiper-item>
      </block>
    </swiper>
    <text >wwkklklk</text>
  </view>
</template>

<script>
  import wepy from 'wepy';
  // import inaver from '../inaver/inaver';
  export default class Index extends wepy.page {
    config = {
      navigationBarTitleText:"首页"
    }
    //绑定数据
    data = {
      imgUrls:[
        'https://img.pc841.com/2018/0815/20180815101229911.jpg',
        'https://img.pc841.com/2018/0815/20180815101229911.jpg',
        'https://img.pc841.com/2018/0815/20180815101229911.jpg',
        'https://img.pc841.com/2018/0815/20180815101229911.jpg',
      ]
    }
    onLoad(){

    }
    methods = {

    }
    //引入组件
    components = {}
  }
</script>

<style>

</style>

swiper参数

属性名	类型	默认值	说明	最低版本
indicator-dots	Boolean	false	是否显示面板	指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色	1.1.0
indicator-active-color	Color	000000	当前选中的指示点颜色	1.1.0
autoplay	Boolean	false	是否自动切换	
current	Number	0	当前所在页面的 index	
interval	Number	5000	自动切换时间间隔	
duration	Number	500	滑动动画时长	
circular	Boolean	false	是否采用衔接滑动	
vertical	Boolean	false	滑动方向是否为纵向	
bindchange	EventHandle	current	改变时会触发 change 事件，event.detail = {current: current, source: source}