收藏
回答

如何覆盖swiper-item的样式?

如何覆盖swiper-item的样式?

回答关注问题邀请回答
收藏

3 个回答

  • 明天
    明天
    04-26

    对您有帮助的话,给 小生 点个赞吧 ∩▂∩ !!!

    实现轮播切换效果:切换时图片大小有变化

    逻辑层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{
      width100%;
      height258rpx;
      border-radius12rpx;
      transformscale3d(0.93,0.93,0.93);
      transition: all 0.36s;
     
    }
    .slider-item-active .slider-item-img{
      transformscale3d(1,1,1);
    }
    
    04-26
    有用 1
    回复
  • ⁽⁽ଘ你管我管你疯啊ଓ⁾⁾
    ⁽⁽ଘ你管我管你疯啊ଓ⁾⁾
    01-19

    因为我一个item里面有两个元素,多个item之间没有间距

    01-19
    有用
    回复
  • 卢霄霄
    卢霄霄
    01-19

    为啥要做这种事呢

    01-19
    有用
    回复 13
    查看更多(8)
登录 后发表内容
问题标签