5151关注16387浏览
反馈一个 Bug
* Bug 表现是:在Swiper组件的swiper item内嵌入一个scroll-view,注释掉一个view之后,在模拟器和安卓都能正常显示,但iOS会出现问题渲染,通过选择器能选中,但是不会显示。
* 如何复现?
项目中只要将注释的view恢复就能正常显示,注释之后就会消失,推断是swiper-item和scroll-view的嵌套,导致margin样式属性在iOS的webkit上引发bug。
* 提供一个最简复现 Demo
<swiper-item>
<scroll-view scroll-y style='height:90vh'>
<!-- 日程1开始 -->
<view class='panel'>
<view class='panel-left'>
<view class='dot'>★</view>
<view class='vertical'></view>
</view>
<view class='panel-right'>
<text class='time-top'>09:00</text>
<view class='detail-card'>
<view class='panel-right-text' style='margin-bottom:10px'>
<text class='title'>列席市十六届人大二次会议
</text>
<text class='detail'>地点:台州影剧院</text>
</view>
<view class='time-last-row'>
<image src='../../image/clock.png' class='clock-img'></image>
<text class='time-last-text'>上午</text>
</view>
</view>
</view>
</view>
灰色底的view注释之后整个 scroll-view不会被渲染
样式代码
/***日程卡片样式开始**/
.panel {
display: flex;
flex-direction: row;
height: 100rpx;
width: 100vw;
margin-left: 8px;
}
.panel-left {
margin-top: 0px;
}
.dot {
margin-top: 5px;
vertical-align: middle;
position: relative;
color: gold;
font-size: 45rpx;
font-weight: bold
}
.vertical {
width: 2rpx;
height: 400rpx;
background-color: #e5e5e5;
vertical-align: middle;
position: relative;
top: -20px;
margin: 0 auto;
z-index: -99;
}
.time-top {
font-weight: bold;
margin-bottom: 3px;
}
.panel-right {
margin-left: 10px;
margin-top: 10px;
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
.detail-card {
background-color: #fff;
width: 85vw;
height: 300rpx;
border: 0px solid;
box-shadow: 2px 2px 2px #888;
border-radius: 5px;
display: block;
flex-direction: column;
}
.panel-right-text {
margin-left
-
至过去的我
2044人对此回答表示赞同
我是未来的你,你现在是不是在年找寻小程序答案。你不要感觉诧异,给你来信原因,就是让你不在后悔。今天去学习如何推广小程序,相信......点击查看更多> -
吴语
10人对此回答表示赞同
项目中只要将注释的view恢复就能正常显示,注释之后就会消失,推断是swiper-item和scroll-view的嵌套,导致margin样式属性在iOS的webkit上引发bug。
展开100回复分享发布于 6年前评论(0)
收起评论