收藏
回答

swiper设置圆角在真机上不显示

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug swiper 客户端 iOS 6.6.7 2.1.0

在模拟器中的效果:


在真机上面的效果:


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

10 个回答

  • Eric Huang
    Eric Huang
    2018-09-25

    你好,这个看起来应该是webview渲染的bug,可以试一下在 border-radius 后面紧接着加一个 transform: translateY(0);  来暂时解决这个问题。

    2018-09-25
    有用 15
    回复 12
    • 客星之尘
      客星之尘
      2019-05-09

      挖 确实有效 bug 竟然还在

      2019-05-09
      回复
    • 追星逐月
      追星逐月
      2019-07-18
      .swiper{ width: 100%; height: 100%; border-radius: 20rpx; overflow: hidden; transform: translateY(0); }改了后可以了
      2019-07-18
      1
      回复
    • 青团社
      青团社
      2019-09-24
      亲测有效~,今天遇到这个坑了
      2019-09-24
      回复
    • 晴天
      晴天
      2020-11-27
      请问加transform:translateY(0)是什么原理呢
      2020-11-27
      1
      回复
    • longlive
      longlive
      2021-04-27
      2021年了这个bug还没修复,老哥稳啊,亲测有效
      2021-04-27
      回复
    查看更多(7)
  • ꯭應꯭豪꯭🇨🇳
    ꯭應꯭豪꯭🇨🇳
    2023-03-29

    这个bug太古老了,但是每次都会碰到

    暂时只能用这个解决-transform: translateY(0);
    


    border-radius30rpx;
    overflow: hidden;
    transform: translateY(0);
    
    2023-03-29
    有用 1
    回复
  • Ivy  姚艳梅
    Ivy 姚艳梅
    2019-01-23

    在swiper上加overflow:hidden 和transform: translateY(0);,亲测有效

    2019-01-23
    有用 1
    回复 1
    • Zepln
      Zepln
      2019-03-13

      这样确实是可以的,已解决这个问题

      2019-03-13
      回复
  • 唐tang
    唐tang
    2018-12-11
    .wrap{
       -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
    }

    拿走不谢

    2018-12-11
    有用 1
    回复
  • 倔强的小牛dvb🐮
    倔强的小牛dvb🐮
    2021-10-13

    套了层view,也得在这层view上加

    -webkit-transform:rotate(0deg);

    transform: translateY(0);

    2021-10-13
    有用
    回复
  • 叫我狗蛋爸爸🐶 คิดถึง
    叫我狗蛋爸爸🐶 คิดถึง
    2021-08-16

    21年8月份了兄弟,还没修复

    2021-08-16
    有用
    回复 1
  • 🌻莹莹🌻
    🌻莹莹🌻
    2020-07-21

    比较好奇,大家怎么发现这个解决方案的?

    2020-07-21
    有用
    回复
  • 拾柒💫
    拾柒💫
    2019-11-06

    遇到了同样的问题 ios可以 安卓的不可以按照,在swiper上加overflow:hidden 和transform: translateY(0);在真机上轮播图的圆角只有下面圆角生效, IOS的没问题,开发者工具上也没问题,各位大佬有什么好的办法么?

    2019-11-06
    有用
    回复
  • 2018-09-03

    我在swiper外层加了个view

    <view class='s'>
    <swiper>
    ....
    </swiper>
    </view>


    .s{

        border-radius:20rpx;

        overflow:hidden;

    }

    2018-09-03
    有用
    回复 1
    • 小靓
      小靓
      2019-01-02

      这个ios真机不行啊

      2019-01-02
      回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-07-09

    你好,问题未复现,请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-07-09
    有用
    回复 4
    • 如果
      如果
      2018-07-10

      wechatide://minicode/NtolKNmw7ptC

      手机机型iphone6 系统11.4,微信版本6.7.0

      2018-07-10
      回复
    • 疯狂的小辣椒
      疯狂的小辣椒
      2018-07-10回复如果

      你好,可以把样式加在swiper-itew上可以实现圆角效果,反馈已收到,我们先确认下

      2018-07-10
      回复
    • 来自天堂的魔鬼
      来自天堂的魔鬼
      2018-07-24

      样式放在swiper-item上,滑动的时候圆角跟着动了,想要的不是这样的效果

      2018-07-24
      回复
    • 2018-09-04回复疯狂的小辣椒

      还没修复么,还是设置不了圆角。。。

      2018-09-04
      回复
登录 后发表内容