微信小程序 旋转木马轮播图

效果图如下

wxml代码:

<view class='top'>
    <swiper class='swiperClass' indicator-dots='true' style='height:784rpx;width:100%' circular previous-margin="140rpx" next-margin="140rpx" bindchange="bindchange">
      <block wx:for="{{imgUrls}}"
        wx:key="{{index}}">
        <swiper-item>
          <image src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : 'quiet'}}" mode='aspectFill' />
        </swiper-item>

      </block>
    </swiper>
  </view>

 wxss代码:

page {
  background: #fff;
}

.swiperClass {
  margin: 0;
}

.slide-image {
  width: 100%;
  height: 694rpx;
  border-radius: 10px;
  position: relative;
  background: pink;
  margin-top: 20rpx;
}

swiper-item image.active {
  transform: none;
  transition: all 0.2s ease-in 0s;
}

swiper-item image.quiet {
  transform: scale(0.8333333);
  transition: all 0.2s ease-in 0s;
}

.top {
  width: 750rpx;
  height: 784rpx;
  background: rgba(246, 245, 245, 1);
  padding-top: 10rpx;
}

.item {
  background: pink;
}

js代码:

const app = getApp()
const myUrl = require("../../../utils/url.js");
const util = require("../../../utils/util.js");
var user = wx.getStorageSync('userMsg');


Page({

  /**
   * 页面的初始数据
   */
  data: {

    imgUrls: ['http://t16img.yangkeduo.com/pdd_oms/2019-02-27/ef43e9cc33aec27c10acd8fbe355c1b3.jpg', 'http://t16img.yangkeduo.com/pdd_oms/2019-02-26/16c11fbc614c1b5369a281c42c6f8aab.jpg', 'http://t16img.yangkeduo.com/pdd_oms/2019-02-25/a4b9a8ca3cc79a915e35ad4e3d025afd.jpg', 'http://t16img.yangkeduo.com/pdd_oms/2019-02-22/84c0d26587c2cc2cd0ead5108bad06e2.jpg', 'http://t16img.yangkeduo.com/pdd_oms/2019-02-20/96c986bbd28699bb36f591d87caab619.jpg'],
    swiperIndex: 0, //这里不写第一次启动展示的时候会有问题
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    console.log('haha');
    let that = this;

  },


  bindchange(e) {
    this.setData({
      swiperIndex: e.detail.current
    })
  },

 
})