效果图如下
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
})
},
})