小程序之轮播图

index.js

var app = getApp();

Page({

data: {

slider: [],

swiperCurrent: 0,

indicatorDots: false,

autoplay: false,

interval: 5000,

duration: 1000

},

onLoad: function () {

var that = this;

that.setData({

slider: [{

linkUrl: "/images/banner-hy.png",

picUrl: "/images/banner-hy.jpg"

}, {

linkUrl: "/images/banner-19.png",

picUrl: "/images/banner-19.jpg"

}, {

linkUrl: "#",

picUrl: "/images/banner-money.jpg"

}]

})

},

//轮播图的切换事件

swiperChange: function (e) {

//只要把切换后当前的index传给<swiper>组件的current属性即可

this.setData({

swiperCurrent: e.detail.current

})

},

//点击指示点切换

chuangEvent: function (e) {

this.setData({

swiperCurrent: e.currentTarget.id

})

}

})

index.wxml

<view class="recommend" >

<view class="swiper-container">

<swiper autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">

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

<swiper-item data->{{index+1}}</view>

</block>

</view>

</view>

</view>

index.wxss

/*banner*/

.swiper-container{

position: relative;

}

.swiper-container .swiper{

height: 430rpx;

}

.swiper-container .swiper .img{

width: 100%;

height: 100%;

}

.swiper-container .dots{

position: absolute;

right: 40rpx;

bottom: 20rpx;

display: flex;

justify-content: center;

}

.swiper-container .dots .dot{

margin: 0 10rpx;

width: 28rpx;

height: 28rpx;

background: #fff;

border-radius: 50%;

transition: all .6s;

font: 300 18rpx/28rpx "microsoft yahei";

text-align: center;

}

.swiper-container .dots .dot.active{

background: #f80;

color:#fff;

}