收藏
回答

圆角轮播图ios兼容问题

问题模块 框架类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
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;

}




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

6 个回答

  • LastLeaf
    LastLeaf
    2018-01-31

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

    2018-01-31
    赞同
    回复 3
    • 我的我
      我的我
      2018-09-17

      你好圆角轮播图解决了吗

      2018-09-17
      赞同
      回复
    • LastLeaf
      LastLeaf
      2018-09-19

      还没有。

      2018-09-19
      赞同
      回复
    • 😊。
      😊。
      2018-12-11回复LastLeaf

      现在这个圆角问题解决了吗?

      2018-12-11
      赞同
      回复
  • C.Q.Q
    C.Q.Q
    2018-02-25

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


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

    2018-02-25
    赞同
    回复
  • 东以东南
    东以东南
    2018-02-26

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

    2018-02-26
    赞同
    回复