小程序模板:专业的小程序模板与静态模板分享平台
小程序
教程
搜索
当前位置 : 首页> 小程序教程> 微信小程序——swiper圆角在真机上无效果的解决方法

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

解决方法

index.wxml


    
      
        
          
         
       
    


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;
}


联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了