html52.com
我爱小程序-开发者交流社区

swiper的一个渲染bug

问题模块 API/组件名称 终端类型 微信版本 基础库版本
API和组件 Swiper-item与scroll-view 客户端 6.61 1.70

反馈一个 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'>列席市十六届人大二次会议\n</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: 10px;

margin-top: 10px;

}


.title {

font-weight: bold;

font-size: 38rpx;

color: red;

}


.detail {

margin-top: 10px;

font-size: 28rpx;

color: #787878;

}


.time-last-row {

display: flex;

flex-direction: row;

margin-top: 10px;

margin-left: 8px;

margin-bottom: 10px;

}


.clock-img {

height: 45rpx;

width: 45rpx;

margin-right: 5px;

}


.time-last-text {

font-size: 30rpx;

color: #888;

}


/* 日程卡片样式结束 */


网友回复

LastLeaf:

项目中只要将注释的view恢复就能正常显示,注释之后就会消失,推断是swiper-item和scroll-view的嵌套,导致margin样式属性在iOS的webkit上引发bug。


这个推断有道理,但不一定和 scroll-view 有关。应该是 iOS 系统的绘制 bug ,容易在有节点覆盖在 swiper 上或者有 image 节点参与时触发。目前没有通用的解决方法。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

真正的个人免签约支付接口

云免签H5支付