对您有帮助的话,给 小生 点个赞吧 ∩▂∩ !!! 实现轮播切换效果:切换时图片大小有变化 [图片] 逻辑层js: swiper:{ previousMargin:"52rpx", nextMargin:"52rpx", current:1, activeItem:"slider-item-active", indicatorDots:true, indicatorColor:"#ddd", indicatorActiveColor:"#009f7f", autoplay:false, interval:5000, circular:true, img:[{index:0,src:"../../resources/slider1.png"}, {index:1,src:"../../resources/slider2.png"}, {index:2,src:"../../resources/slider3.png"}] } }, ChangeActive(e){ const index=e.detail.current; this.setData({ swiper:{...this.data.swiper,...{current:index}} //修改current的值 }); } 视图层wxml: <!-- swiper轮播 --> <swiper class="slider" previous-margin="{{swiper.previousMargin}}" next-margin="{{swiper.nextMargin}}" current="{{swiper.current}}" indicator-dots="{{swiper.indicatorDots}}" indicator-color="{{swiper.indicatorColor}}" indicator-active-color="{{swiper.indicatorActiveColor}}" autoplay="{{swiper.autoplay}}" interval="{{swiper.interval}}" circular="{{swiper.circular}}" bindchange="ChangeActive" > <block wx:for="{{swiper.img}}" wx:key="*this"> <swiper-item class="slider-item {{swiper.current===item.index?swiper.activeItem:''}}"> <image class="slider-item-img" src="{{item.src}}"></image> </swiper-item> </block> </swiper> 视图层 wxss: /* swiper轮播组件 */ .slider-item{ width:100%; box-sizing: border-box; padding:0rpx 0rpx; } .slider-item-img{ width: 100%; height: 258rpx; border-radius: 12rpx; transform: scale3d(0.93,0.93,0.93); transition: all 0.36s; } .slider-item-active .slider-item-img{ transform: scale3d(1,1,1); }
如何覆盖swiper-item的样式?如何覆盖swiper-item的样式?
2021-04-26