公告列表
公告列表
收藏
回答

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

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

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

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

9 个回答

  • 星辰
    星辰
    2019-11-20

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

    2019-11-20
    有用 14
    回复 3
    • 那狗子真肥
      那狗子真肥
      2019-12-21
      我在移动端遇到了同样的问题，加overflow:hidden 和transform: translateY(0);有效，光加overflow:hidden仍然不能解决；赞同这条回答
      2019-12-21
      赞 3
      回复
    • Ha Ha Ha
      Ha Ha Ha
      2020-01-09
      最佳回答，其它答案在图片外再套层view做圆角或图片直接做圆角 滑动时图片交接处上边有缺口太丑了。
      不过为什么加了transform: translateY(0); swiper的overflow:hidden 在真机才有效？什么道理
      2020-01-09
      赞
      回复
    • 骑着毛驴逗你玩儿
      骑着毛驴逗你玩儿
      2022-03-24
      亲测有效~ 👍🏻
      2022-03-24
      赞
      回复
  • w
    w
    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
    回复 9
    • 2018-11-28

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

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

      有问题，我试过了

      2018-11-28
      赞 1
      回复
    • 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
      赞
      回复
    查看更多(4)
  • 潜心
    潜心
    2023-04-21

    <view style="padding: 0px 10px;">

    <swiper :autoplay="autoplay" style="border-radius: 10px;overflow: hidden;">

    <swiper-item v-for="(item, index) in swiper" :key="index" style="border-radius: 10px;">

    <img :src="item.src">

    </swiper-item>

    </swiper>

    </view>

    2023-04-21
    有用
    回复
  • 苦瓜炒鸡蛋
    苦瓜炒鸡蛋
    2022-08-16

    亲测有效，感谢！！！

    2022-08-16
    有用
    回复
  • Garry
    Garry
    2020-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中的背景颜色进行验证，容易误导...

    2020-06-02
    有用
    回复
  •  
     
    2020-02-16

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

    2020-02-16
    有用
    回复
  • 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
      赞
      回复
    • 招财猫的小铃铛🔔
      招财猫的小铃铛🔔
      2018-11-19回复

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

      2018-11-19
      赞
      回复
    • 2018-11-19回复招财猫的小铃铛🔔

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

      2018-11-19
      赞
      回复
    • 招财猫的小铃铛🔔
      招财猫的小铃铛🔔
      2018-11-19回复

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

      2018-11-19
      赞
      回复
    查看更多(3)
请 登录 后发表内容
相关问题
相关文档