微信小程序设置圆角后-模拟器显示圆角，真机不显示

已于 2023-08-02 11:11:24 修改
阅读量348 收藏
点赞数
分类专栏： 小程序 文章标签： 微信小程序 小程序 前端
于 2023-04-12 08:41:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JackieDYH/article/details/129846804
版权
文章讲述了在使用swiper组件时遇到的CSS圆角在模拟器显示正常，但在真机上无法显示的问题。通过添加`transform:translateY(0)`到CSS样式中，成功解决了这个问题。此问题已在微信开放社区被讨论并确认为一个bug。
摘要由CSDN通过智能技术生成
JackieDYH
关注
专栏目录
小程序轮播图模拟器显示圆角，真机不显示
https://shixuebin.gitee.io/hexo-blog/
12-06 123
修改wxss设置：增加。但真机上无法显示圆角。
小程序——swiper圆角在真机上无效果的解决方法
Lucifer的博客
04-29 3243
小程序6——API一、网络请求1. wx.request(Object object) 一、网络请求 1. wx.request(Object object) 首先要在微信小程序后台配置服务器信息。
css3 模拟圆角outline
aoyou4250的博客
05-07 232
　　今天网上看到张鑫旭大神的一篇模拟圆角outline的文章，觉得很强大，很神奇，很流弊，所以赶紧记录下来，供大家分享，学习！ 　　outline有个特性就是它不会占据空间，这是个很强大的属性，但是一般的outline都是方形的，那怎么才能实现绚丽的圆角outline效果了？我们都知道css3中有border-radius属性可以设置圆角，但是如果配合border和border-rad...
微信小程序swiper设置图片圆角和指示形状改变
小耳朵晨晨
05-22 5009
wxml: <viewclass="swiperCont"> <swiperclass="swiper"easing-function="easeInOutCubic"indicator-dots="true"indicator-active-color="#ffffff" interval="3000"duration="500"indicator-color="rgba(255,255,255,.3)"> &...
微信小程序设置border-radius=“50px”无法成圆角的问题
正一品程序员的博客
03-19 3351
要加上overflow: hidden; wxss代码： width: 100px; height: 100px; border-radius:50px; overflow:hidden;
微信小程序：swiper轮播图添加外层圆角
彭世瑜的博客
07-05 4039
微信小程序：swiper轮播图添加外层圆角 .swiper-wrap{ overflow: hidden; border-radius: 8rpx; box-sizing: border-box; width: 100%; transform: translateY(0); // 关键属性 line-height: 1rpx; // 可以简单调整圆点位置 } 参考 微信小程序-swiper轮播图圆角滑动会先直角再圆角的解决办法 为什么添加transform: translateY
微信小程序开发作业模板03-MOOC1
08-04
【微信小程序计时器开发详解】 微信小程序是一种轻量级的应用开发框架，允许开发者构建功能丰富的移动应用，而无需安装。在这个“微信小程序开发作业模板03-MOOC1”中，我们将深入探讨如何实现一个简单的计时器功能...
开发微信小程序
qq_54867440的博客
05-29 1826
前言 微信小程序，简称小程序，缩写XCX，英文名mini program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。 对于开发者而言，小程序的开发比 APP 简单、耗时短、 bug 少、流畅程度高 目录 前言 1.微信小程序 申请帐号 安装开发工具 你的第一个小程序 小程序大体预览 编译预览 通过左上角标签查看模拟器，编辑器，调试器以及可视化 编辑器 调试器 代码构成 .json后缀的JSON配置文件...
微信小程序的开发（前端）
weixin_47401619的博客
01-07 1971
微信小程序的学习过程
微信小程序设置swiper圆角ios上失效
WwangXue的博客
09-04 697
效果，在模拟工具上是有效果的，真机上没有圆角 解决方案：在 border-radius 后面紧接着加一个 transform: translateY(0); 来暂时解决这个问题。 等待官方解决方案....
解决微信小程序中 swiper在 ios 中圆角不显示的问题
Missbelover的博客
01-12 3833
解决微信小程序中 swiper 在 ios 中圆角不显示的问题（在android中可正常显示） 解决办法？ .swiper { // 给swiper 添加以下属性 transform: translateY(0); }
微信小程序开发----- swiper设置圆角时，瞬间直角问题, 解决方法
weixin_74535649
08-02 3332
当设置swiper圆角时，会出现先直角后圆角当设置swiper圆角时，会出现先直角后圆角。
小程序swiper图片修改为圆角，费老大劲了
最新发布
cjl525574193的博客
12-23 1054
在小程序开发中我遇到要把小程序中的swiper中的图片做出圆角的效果看着好看点，可是直接加属性根本不行
小程序-swiper + borderRadius + overflow失效问题（轮播图案例）
Cosalneo的博客
09-18 439
上面的写法对于安卓和模拟器来说是可以完美展示的，ios上展示就有问题了，圆角不生效。：由于不同内核导致的，ios内核只要子元素使用了。就会失效，而swiper的滑动效果正好使用了。这种情况下，遇到了第一个问题，圆角设置失败。：微信webview的渲染问题，至今未修复。：给container元素添加。
解决uniapp编译到微信小程序部分圆角不生效bug
牛马程序员进阶之路
05-22 788
uniapp微信小程序圆角不生效bug
微信小程序设置swiper圆角在ios上失效解决
Martin的博客
08-19 1834
微信小程序设置swiper圆角在ios上失效解决
微信小程序自定义swiper轮播图面板指示点|小圆点|进度条
weianl的博客
12-12 2万+
描述： 在工作中开发一个页面，多少都会用到轮播图，但是由于微信官方提供的轮播图swiper组件局限性太大了，所以接下来我会教大家怎么去自定义轮播图的进度条。 简单修改： 如果你的项目只是简单的修改小圆点的颜色，那么只需要修改官方提供的indicator-color和indicator-active-color参数就可以了 属性 类型 默认值 说明 indicator-color
小程序中圆角边框的设置
热门推荐
留白空间
01-09 7万+
与CSS一样，小程序中的圆角可以通过border-radius来设置。 以input为例，想要设置圆角边框，只需加上如下样式： border-radius: 5px即可实现如下效果： 不同的是，在小程序中想要设置仅其中某个圆角，而其它为直角，则需要使用 border-bottom-left-radius， border-top-left-radius， border-bottom-left-
uni-app解决小程序圆角样式不生效
weixin_30828379的博客
06-03 4286
在使用uni-app实现小程序的时候，设置左图的右圆角不生效，样式也都没有问题，在模拟器上也可以正常现实，手机上样式出现差别，现有以下解决方法： 设置整个圆角，然后左边使用margin-left：-30upx，隐藏左边多余的圆角 代码如下： <cover-view class="video-mask-btn"> <cover-view...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JackieDYH

谢谢您嘞！我会继续加油地

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值