wx.html
<!--index.wxml-->
<swiper class='swiperClass' interval="2000" duration="1000" previous-margin="30px" next-margin="30px" circular bindchange="bindchange" style='height: 1000rpx'>
<block wx:for="{{imgUrls}}" wx:key="{{index}}">
<swiper-item>
<image src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : 'quiet'}}" mode='aspectFill'>
</image>
</swiper-item>
</block>
</swiper>wx.css
page{
position: relative;
height: 1334rpx;
}
.swiperClass {
margin: 0;
margin-top: 10px;
}
.slide-image {
width: 100%;
height: 100%;
border-radius: 10px;
position: relative;
}
image.active {
transform: none;
transition: all 0.2s ease-in 0s;
}
image.quiet {
transform: scale(0.8333333);
transition: all 0.2s ease-in 0s;
}wx.js
Page({
/** * 页面的初始数据 */
//.js
data: {
chooseSize: false,
animationData: {},
touchS: [0, 0],
touchE: [0, 0],
imgUrls: [
"../../image/banner1.png",
"../../image/banner2.png",
"../../image/banner3.png"
],
swiperIndex: 0 //这里不写第一次启动展示的时候会有问题
},
bindchange(e) {
this.setData({
swiperIndex: e.detail.current
}) },
/** * 生命周期函数--监听页面加载 */
onLoad: function (options) {
},
/** * 生命周期函数--监听页面初次渲染完成 */
onReady: function () {
},
/** * 生命周期函数--监听页面显示 */
onShow: function () {
},
/** * 生命周期函数--监听页面隐藏 */
onHide: function () {
},
/** * 生命周期函数--监听页面卸载 */
onUnload: function () {
},
/** * 页面相关事件处理函数--监听用户下拉动作 */
onPullDownRefresh: function () {
},
/** * 页面上拉触底事件的处理函数 */
onReachBottom: function () {
},
/** * 用户点击右上角分享 */
onShareAppMessage: function () {
}})
