基础库2.24.7 ,在去掉animation的时候swiper显示一切正常
wxml
<view class="container {{isMask === true ? 'mask-blur':''}}">
<swiper current="{{currentBannerIndex}}" bindchange="handleChangeBanner" next-margin="60rpx" previous-margin="60rpx" class="swiper">
<swiper-item wx:for="{{list}}" wx:key="id" animation="{{currentBannerIndex == index ? animationSelected : animationNoSelected}}">
<view class="swiper-item-view">
<text class="addtime">{{item.addTime}}</text>
<view class="swiper-item" bindtap="gopriview" data-item="{{item}}">
<image src="{{item.bookCover}}" class="scrollImage"></image>
<text>{{item.projectIntroduce}}</text>
</view>
</view>
</swiper-item>
</swiper>
</view>
js
Page({
data: {
list: [
{
projectIntroduce: "text1",
addTime: "123",
bookCover:
"//obsa.arsnowslide.com/195360628956909568/244552849175306240.jpg",
},
{
projectIntroduce: "text1",
addTime: "123",
bookCover:
"//obsa.arsnowslide.com/195360628956909568/244552849175306240.jpg",
},
],
title: "历史记录",
isMask: false,
borchureDetail: {},
animationSelected: {},
animationNoSelected: {},
currentBannerIndex: 0,
},
onLoad(options) {},
handleChangeBanner(e) {
if (e.detail.source !== "touch") return;
this.setData({
currentBannerIndex: e.detail.current,
});
console.log(this.data.currentBannerIndex);
this.enlarge();
this.shrink();
},
enlarge() {
console.log("enlarge");
let animationSelected = wx.createAnimation({
duration: 1000,
timingFunction: "ease",
});
animationSelected.scale(1.2, 1.2).step();
this.setData({
animationSelected: animationSelected.export(),
});
},
shrink() {
console.log("shrink");
let animationNoSelected = wx.createAnimation({
duration: 1000,
timingFunction: "ease",
});
animationNoSelected.scale(1, 1).step();
this.setData({
animationNoSelected: animationNoSelected.export(),
});
},
onShow() {
this.enlarge();
this.shrink();
},
});
less
.container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
flex-direction: column;
.swiper {
margin-top: 201rpx;
width: 100%;
height: 100%;
display: flex;
.swiper-item-view{
display: flex;
flex-direction: column;
align-items: center;
.addtime {
color: #fff;
z-index: 99;
}
.swiper-item {
.scrollImage {
margin-top: 54rpx;
border-radius: 20rpx;
width: 500rpx;
height: 700rpx;
}
text {
margin-top: 25rpx;
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 500;
color: #020202;
line-height: 48rpx;
}
width: 613rpx;
height: 923rpx;
display: flex;
flex-direction: column;
align-items: center;
}
}
}
}
你是想为swiper设置动画还是为swiper-item设置动画?
1、暂时建议样式不要放在swiper-item上,放在子元素的view上。
如果不在swiper中绑定handleChangeBanner的话一切正常