同样的配置,同样的属性,只是属性的顺序不一样,上面这段代码会卡死,下面的那段代码不会卡死
<view class="page-content card-swiper">
<wd-swiper
:autoplay="false"
v-model:current="currentSwitch"
:indicator="false"
height="600rpx"
:loop="false"
image-mode="aspectFit"
custom-item-class="custom-item"
custom-image-class="custom-image"
custom-next-image-class="custom-image-prev"
custom-prev-image-class="custom-image-prev"
:list="swiperList"
previousMargin="100rpx"
nextMargin="100rpx">
<template #item="{ item }">
<img :src="item.src" crossorigin="anonymous" mode="aspectFill" />
</template>
</wd-swiper>
</view>
<view class="page-content card-swiper">
<wd-swiper
:list="swiperList"
:autoplay="false"
:indicator="false"
image-mode="aspectFit"
height="600rpx"
previousMargin="100rpx"
nextMargin="100rpx"
:loop="false"
v-model:current="current"
custom-item-class="custom-item"
custom-image-class="custom-image"
custom-next-image-class="custom-image-prev"
custom-prev-image-class="custom-image-prev">
<template #item="{ item }">
<img :src="item.src" crossorigin="anonymous" mode="aspectFill" />
</template>
</wd-swiper>
</view>
// 轮播组件样式
.card-swiper {
--wot-swiper-radius: 0;
--wot-swiper-item-padding: 0 24rpx;
--wot-swiper-nav-dot-color: #e7e7e7;
--wot-swiper-nav-dot-active-color: #4d80f0;
padding-bottom: 24rpx;
.custom-wrap {
height: 400rpx;
}
:deep(.custom-item) {
height: 400rpx;
}
:deep(.custom-image) {
border-radius: 12rpx;
background-color: #D8D8D8;
transform: scale(1);
}
:deep(.custom-image-prev) {
transform: scale(0.85);
}
}