小程序 轮播图

轮播图：

css

swiper {

height: 400rpx;

}

swiper-item image {

width: 100%;

height: 100%;

}

.swiper-container{

position: relative;

margin-top:-300rpx;

}

.swiper-container .swiper{

height: 300rpx;

}

.swiper-container .swiper .img{

width: 90%;

height: 100%;

margin: 0 5%;

border-radius: 20rpx;

}

xml

 

<view class="swiper-container">

  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" indicator-color="{{indicatorCo}}" indicator-active-color="{{indicatoraAC}}" interval="{{interval}}" duration="{{duration}}" circular="{{duration}}" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">

    <block wx:for="{{imgUrls}}" wx:key="unique">

      <swiper-item>

        <image src="{{item}}" class="img" bindtap="swipclick" mode="aspectFill"/>

      </swiper-item>

    </block>

  </swiper>
  

</view>

js

Page({

  data: {

    swiperCurrent: 0,

    indicatorDots: true,

    autoplay: true,

    interval: 3000,

    duration: 800,

    circular: true,

    indicatorCo:"#ffdfdc",

    indicatoraAC:"#ff948a",

    imgUrls: [

      'http://life.southmoney.com/tuwen/UploadFiles_6871/201805/20180531142617331.jpg',

      'http://life.southmoney.com/tuwen/UploadFiles_6871/201805/20180531142617331.jpg',

      'http://life.southmoney.com/tuwen/UploadFiles_6871/201805/20180531142617331.jpg'

    ],

    links: [

      '../user/user',

      '../user/user',

      '../user/user'

    ]


  },

  //轮播图的切换事件

  swiperChange: function (e) {

    this.setData({

      swiperCurrent: e.detail.current

    })

  },

  //点击指示点切换

  chuangEvent: function (e) {

    this.setData({

      swiperCurrent: e.currentTarget.id

    })

  },

  //点击图片触发事件

  swipclick: function (e) {

    console.log(this.data.swiperCurrent);

    wx.switchTab({

      url: this.data.links[this.data.swiperCurrent]

    })

  }

})

 

效果图（不会录频啊  有小伙伴告诉我吗  哈哈哈哈）

 

 

swiper小圆点 默认样式修改  （以下代码  上面都有  这里只是做个截屏说明一下）

xml

                                                                                                图1

 

js

 

                                                                                                                             图2

 

API

                                                                                               图3