小程序——swiper圆角在真机上无效果的解决方法

模拟器上的效果

真机上的效果

解决方法

index.wxml

<view class="swiper-wrap">
    <swiper
      class="swiper"
      indicator-dots="true"
      indicator-color="rgba(255, 255, 255, 0.4)"
      indicator-active-color="#fff"
      autoplay="true"
      interval="3000"
      duration="500"
      >
      <block wx:for="{{swiperList}}" wx:key="*this">
        <swiper-item class="swiper-item">
          <image class="swiper-image" src="{{item.url}}" />
        swiper-item>
      block>
    swiper>
  view>

index.js

let bannerList = [
	{url: "./images/banner1.png"},
	{url: "./images/banner2.png"},
	{url: "./images/banner3.png"}
]

Page({
	data: {
		bannerList: bannerList
	}
})

index.wxss

.banner-wrap {
  margin: 0 auto;
  width: 686rpx;
  height: 298rpx;
}

.swiper {
  width: 100%;
  height: 298rpx;
  /*下面三行代码很关键*/
  border-radius: 14rpx;
  overflow: hidden;
  transform: translateY(0);
}

.swiper-image {      /* 小程序中image组件默认的宽高是 320*240，最好重新设置一遍 */
  width: 686rpx;
  height: 298rpx;
}

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