收藏
回答

swiper 轮播图圆角滑动变会变成直角然后再回到圆角

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 需求 swiper 客户端 最新 最新

你好,我用swiper 实现轮播图 swiper圆角 图片滑动的时候会先变成直角然后变成圆角,怎么解决?

最后一次编辑于  2018-09-19
回答关注问题邀请回答
收藏

7 个回答

  • 星辰
    星辰
    2019-11-20

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

    2019-11-20
    有用 4
    回复 2
    • 那狗子真肥
      那狗子真肥
      2019-12-21
      我在移动端遇到了同样的问题,加overflow:hidden 和transform: translateY(0);有效,光加overflow:hidden仍然不能解决;赞同这条回答
      2019-12-21
      2
      回复
    • Ha Ha Ha
      Ha Ha Ha
      01-09
      最佳回答,其它答案在图片外再套层view做圆角或图片直接做圆角 滑动时图片交接处上边有缺口太丑了。
      不过为什么加了transform: translateY(0); swiper的overflow:hidden 在真机才有效?什么道理
      01-09
      回复
  • 八月
    八月
    2019-04-10

    刚好看到,写一个自己的解决方法给大家参考。


    <!-- { start -->
     
    <view class="控制阴影">
        <view style="border-radius: 16rpx;overflow: hidden;">
            <swiper>...</swiper>
        </view>
    </view>
      
    <!-- end } -->


    真机没有圆角参考:

    https://developers.weixin.qq.com/community/develop/doc/00026658428810dd8c07c062556400

    2019-04-10
    有用 1
    回复
  • Kevan
    Kevan
    2018-11-28

    给swiper外层套一个view设置border-radius和overflow:hidden应该就可以了

    2018-11-28
    有用 1
    回复 8
    • 我的我
      我的我
      2018-11-28

      你是这样做的?确定没问题?

      2018-11-28
      回复
    • Rose
      Rose
      2018-11-28

      有问题,我试过了

      2018-11-28
      回复
    • Kevan
      Kevan
      2018-11-28回复我的我

      这应该没问题吧

      2018-11-28
      回复
    • 我的我
      我的我
      2018-11-28回复Kevan

      为啥你的可以,我之前也是这样写的。不行,还是谢谢,有机会我再试试

      2018-11-28
      回复
    • Kevan
      Kevan
      2018-11-28回复我的我

      每一层我都设置了同样的border-radius大小

      2018-11-28
      回复
    查看更多(3)
  • Garry
    Garry
    06-02
    // HTML
    <view class="uenf">
      <swiper indicator-dots='true'indicator-color='#ccc'indicator-active-color='#333'>
        <swiper-item>
          <image src="/images/06.png"></image>
        </swiper-item>
        <swiper-item>
          <image src="/images/07.png"></image>
        </swiper-item>
        <swiper-item>
          <image src="/images/08.png"></image>
        </swiper-item>
        <swiper-item>
          <image src="/images/09.png"></image>
        </swiper-item>
      </swiper>
    </view>
    
    
    
    // CSS
    .uenf{
      border-radius: 30rpx;
      /* background-color: #ccc; */
    }
    swiper{
      height: 400rpx;
      margin:20rpx;
      border-radius: 30rpx;
      overflow: hidden;
    }
    swiper image{
      width: 100%;
      height: 100%;
      border-radius: 30rpx;
    }
    


    注意图片路径 还有 .uenf中的背景颜色进行验证,容易误导...

    06-02
    有用
    回复
  •  
     
    02-16

    在swiper中的wxss样式里添加上overflow:hidden即可。

    02-16
    有用
    回复
  • 逆袭LWJ
    逆袭LWJ
    2018-09-21

    lz解决了吗?我也在烦恼这个问题中

    2018-09-21
    有用
    回复 1
    • 我的我
      我的我
      2018-09-21

      没有,换个方式

      2018-09-21
      回复
  • 🚗🚕🚙🚌🚎🚒🚐🚚
    🚗🚕🚙🚌🚎🚒🚐🚚
    2018-09-19

    ?怎么解决还是怎么实现

    2018-09-19
    有用
    回复 8
    • 我的我
      我的我
      2018-09-19



      swiper 轮播滑动的时候圆角变直角了,滑动玩,就好了,

      2018-09-19
      回复
    • 🚗🚕🚙🚌🚎🚒🚐🚚
      🚗🚕🚙🚌🚎🚒🚐🚚
      2018-09-19回复我的我

      这个应该是css的问题吧,检查一下,没遇到过

      2018-09-19
      回复
    • Miss.TJP🍂
      Miss.TJP🍂
      2018-11-19回复我的我

      请问楼主解决了吗 我现在也碰到了这个问题

      2018-11-19
      回复
    • 我的我
      我的我
      2018-11-19回复Miss.TJP🍂

      我看有人说在 swiper-item里面修改圆角,但是我的还是不行。

      2018-11-19
      回复
    • Miss.TJP🍂
      Miss.TJP🍂
      2018-11-19回复我的我

      我也是 每一层都加了圆角 还是不行 ios跟安卓两端都不可以

      2018-11-19
      回复
    查看更多(3)
登录 后发表内容