第一张是模拟器上的效果,第二张是iOS真机效果,文字没显示出来。
真机vConsole 上看wxml结构,内容是存在的。
以下是wxml代码和css代码。
< view class = "benefits-badge-wrapper" > < block wx:for = "{{benefits}}" wx:for-item = "benefit" wx:key = "{{id}}" > < view class = "benefit-badge" style = "z-index:{{10-index}};" >{{benefit.name}}</ view > </ block > </ view > |
.benefits-badge-wrapper { display : flex; position : absolute ; top : 0 ; /*right: 0;*/ } .benefits-badge-wrapper .benefit-badge { color : white ; padding : 0 30 rpx 6 rpx; position : relative ; z-index : 10 ; font-size : 28 rpx; } .benefit-badge::before { content : '' ; position : absolute ; top : 0 ; right : 0 ; bottom : 0 ; left : -30 rpx; z-index : -1 ; border-radius: 0 0 15 rpx 15 rpx; box-shadow: 2 rpx 2 rpx 10 rpx 0 rgba( 0 , 0 , 0 , 0.20 ); transform: scaleY( 1.3 ) perspective( 10 rpx) rotateX( -5 deg); transform-origin: bottom ; background : #F7B500 ; } |
js 文件里面除了提供data,没有任何代码。不知道是不是小程序对于 iOS 的 css 兼容有问题?或者说需要什么特殊处理?求官方人员解答
我看到你的问题在网上查了一下,查到的结果 意思是说 display:flex;在ios上会有可能出现兼容问题,暂时没法解决
儿
display: -webkit-flex;