收藏
回答

圆角轮播图ios兼容问题

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


将轮播图样式改为圆角。在安卓系统里运行,没有一点问题,但是在ios系统中运行时,图片静止时,轮播图为圆角,但是当触摸滑动时候,外边框就变成了直角。css中关于border-radius都做了兼容性写法。这样的情况如何解决。

html:

<view class='body'>

<!--顶部轮播图  -->

<swiper class="moveBox" indicator-dots="{{indicatorDots}}" id="custom_swiper"

autoplay="{{autoplay}}" interval="{{interval}}" indicator-color="rgb(255,255,255)" indicator-active-color="rgb(255, 0,0)" duration="{{duration}}" circular="{{circular}}" bindchange="swiperchange">

<block wx:for="{{imgUrls}}" wx:key="images">

<navigator  url="../detial/detial" hover-class="navigator-hover">

<swiper-item class="moveBox">

<image src="{{item}}" class="slide-image topimage" mode="scaleToFill"/>

</swiper-item>

</navigator>

</block>

</swiper>

</view>

css


/*顶部轮播图样式  */

.body{

padding: 0 5%;

}

#custom_swiper{

-moz-border-radius: 30rpx !important;

-webkit-border-radius: 30rpx !important;

border-radius: 30rpx !important;

overflow: hidden;

height: 600rpx;

}

.topimage{

width: 100%;

height: 100%;

-moz-border-radius: 30rpx !important;

-webkit-border-radius: 30rpx !important;

border-radius: 30rpx !important;

}

.moveBox{

-moz-border-radius: 30rpx !important;

-webkit-border-radius: 30rpx !important;

border-radius: 30rpx !important;

}




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

4 个回答

  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2018-01-31

    你好。这是 iOS 系统的已知限制,目前暂时无法解决。

    2018-01-31
    有用
    回复 4
  • 星辰
    星辰
    2019-11-20

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

    2019-11-20
    有用
    回复
  • 东以东南
    东以东南
    2018-02-26

    轮播图滑动时,图片会出现这个情况。图片如果仅仅静态的展示,可以加个父级让它显示的为圆角。

    2018-02-26
    有用
    回复
  • C.Q.Q
    C.Q.Q
    2018-02-25

    这个问题是否指都是:iOS手机上image组件使用radius实现圆角都会有限制。


    我都应用,在显示圆角/圆形时,iOS会有明显都正方形黑色闪动。

    2018-02-25
    有用
    回复
登录 后发表内容