小程序之輪播圖

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-id="{{item.id}}" data-url="{{item.linkUrl}}">  
          <image src="{{item.picUrl}}" class="img"></image>  
        </swiper-item>  
      </block>  
    </swiper>  
    <view class="dots">  
      <block wx:for="{{slider}}" wx:key="unique">  
        <view class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvent" id="{{index}}">{{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;  
  }