收藏
回答

使用swiper,每张图片设置border-radius圆角,只有右边有效?

首页使用swiper组件轮播图片,为每张图片设置了border-radius,但是只有右边有效,左边还是方形的,我试过把border-radius值调大,就可以看到圆角了,说明应该是每张图片都被剪裁。我试过设置width、padding、margin都不行,在swiper,swiper-item上设置border-radius还是不行,向大佬们求救( •̥́ ˍ •̀ू )


最后一次编辑于  08-01  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

12 个回答

  • 林学
    林学
    08-01

    你图片设置了,padding-left: 40rpx; 导致的吧

    08-01
    赞同 11
    回复 1
    • 梦之狼
      梦之狼
      08-01
      删除了padding-left还是老样子……
      08-01
      赞同
      回复
  • Y
    Y
    08-01

    不是啊、都可以、没有用过你那种设置样式方法、不能帮你指出哪写的不对、我只给图片加了圆角

    08-01
    赞同
    回复 3
    • 梦之狼
      梦之狼
      08-01
      可以分享一下你的css样式吗或者说您是如何做的∠(`ω´*)敬礼
      08-01
      赞同
      回复
    • Y
      Y
      08-01回复梦之狼

      <!----轮播图--->

      <swiper indicator-dots="true" autoplay="true" indicator-active-color="{{mainColor}}" style="height:{{(deviceW-50)/1.5}}px;" class="swiper-v">

      <block wx:for="{{pageData.image}}" wx:key="swiperkey">

      <swiper-item>

      <image src="{{item}}" class="swiper" style="height:{{(deviceW-50)/1.5}}px" />

      </swiper-item>

      </block>

      </swiper>





      .swiper {

      display: flex;

      width: 100%;

      border-radius: 10px;

      }


      .swiper-v {

      margin-top: 60rpx;

      box-shadow: 0px 140px 17px 0px rgba(30, 32, 57, 0.05);

      }


      08-01
      赞同
      回复
    • 梦之狼
      梦之狼
      08-01回复Y
      虽然还是老样子,但还是很感谢分享
      08-01
      赞同
      回复
  • 晨宇同学
    晨宇同学
    08-01

    看下图片是不是显示完整  可能是缩放的问题  image 加mode:aspectFit   图片缩放,完整显示 可以参考微信文档-组件-image

    08-01
    赞同
    回复 2
    • 梦之狼
      梦之狼
      08-01
      widthfix,aspectfill试过了,还是老样子థ౪థ
      08-01
      赞同
      回复
    • 晨宇同学
      晨宇同学
      08-01回复梦之狼
      我试了下这个问题 我没有圆角的原因是图片进行了缩放 比如我写的750*750 缩放后图片其实没有这么大 但计算border值还是以750*750算的
      08-01
      赞同
      回复
  • ~_~
    ~_~
    08-01

    弄个代码片段看看

    08-01
    赞同
    回复
  • Slience 🍃
    Slience 🍃
    08-01

    这个去掉试试

    08-01
    赞同
    回复
  • 梦之狼
    梦之狼
    08-01

    谢谢各位热心帮助,问题解决了。原来图片样式在index.wxss 和 app.wxss被重复设置了,把app.wxss那部分代码删了就行,还有padding-left确实会影响圆角显示。(自己作死…………)

    08-01
    赞同
    回复