项目中，轮播图原本的直角觉得不够美观，于是设置了圆角border-radius: 10rpx;，但是会出现一个bug就是，滑动过程中先显示的直角，等滑动一整张之后才会变成圆角。
这个问题真的是苦恼了半天呢，因为在父级上设置了overflow: hidden;然而在iOS真机上并不买账~
1、首先在轮播图的最外层，先设置好圆角，也就是top_img这个view的样式
2、然后在swiper样式上设置ovewflow:hidden;border-radius:10rpx;
很多百度出来的结果都是这样解决的，我不明白，难道只有我的iOS真机上不好用吗？
关键：在swpier样式设置上除了 ovewflow:hidden;border-radius:10rpx;还要再加上很重要的一个： transform: translateY(0);
加上这关键一句之后，问题才得以解决！赶快记录下来，希望可以帮助到跟我遇到相同问题的伙伴们
项目中，轮播图原本的直角觉得不够美观，于是设置了圆角border-radius: 10rpx;，但是会出现一个bu...
微信小程序轮播图实现，比Android 轮播图来说，显得轻松多了。微信小程序提供swiper组件，官网api提供的...
按照下面的代码封装完轮播组件后，在微信小程序模拟器中可以实现圆角效果，But运行到真机上，圆角效果没了！！！ 轮播...
| 微信小程序轮播图实现，实现在首页上轮播图，让效果更好看。查看微信小程序开发文档可知，微信小程序提供swiper...
1.轮播图Swiper设置圆角，在外层Container设置圆角无效 Text文本溢出文本出现中文＋数字的组合时 ...
轮播图组件swiper 微信小程序提供了滑块视图容器swiper，可以便捷实现轮播图效果。 这个名字和移动端常用的...
微信小程序 swiper组件轮播图 照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单...
在写微信小程序时，有写到实现3D轮播图的效果，可以直接使用微信小程序中自带的组件swiper来实现 效果图如下： ...
微信小程序 swiper 组件的点击切换和滑动切换 滑动切换及点击切换代码块 swiper 的 swiper-it...
swiper是微信小程序的一个滑动组件，非常重要。如果只是做简单的轮播图而不进行复杂的逻辑，直接可以使用，甚至不需...
本文标题：微信小程序-swiper轮播图圆角滑动会先直角再圆角的解决办法
本文链接：https://www.haomeiwen.com/subject/taaqcctx.html
网友评论