小程序
小游戏
企业微信
微信支付
扫描小程序码分享
我在swiper内使用了wx:for循环实现如下图1效果:
但是很大概率会出现内容不显示的问题(如图2),按住不显示的地方又会显示出来了(如图3)。
19 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
这个问题有进展了吗?我遇到了类似的问题。
swiper-item 里只要出现过类似「高亮」样式后,重新回到 swiper-item 就会有部分变成空白:
翻到五月份,高亮 4 号,翻回 4月份再翻到 5 月份的过程中(不释放 touch)只渲染到高亮的 4 号,后面所有的日期都没有渲染。翻到 5 号后(释放 touch),所有元素正常显示。
高亮样式:
.current-date {
color
:
white
;
position
relative
}
.current-date:before {
content
''
display
block
absolute
border-radius:
50%
margin
auto
left
0
right
width
54
rpx;
height
z-index
-1
top
bottom
wxml 中如此填入样式:
<swiper-item>
<view wx:for=
"{{dates}}"
class=
"date{{currentDate == item.date) ? ' current-date' : ''}}"
>5</view>
</swiper-item>
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
wxml
<view class='book-chapter gray' style="height:570rpx" > <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:570rpx" bindchange="bindChange"> <swiper-item> <navigator wx:for='{{chapter.asc}}' url="/page/content/content?book_id={{item.book_id}}&chapter_id={{item.id}}" class='chapter-item border-bottom'> <text class="title">{{item.title}}</text> <text class="addtime">{{item.addtime}}</text> </navigator> <view data-sort="asc" bindtap="goChapters" class='chapter-item more-chapter border-bottom'>查看更多章节<font class="iconfont icon-gengduo"></font></view> </swiper-item> <swiper-item> <navigator wx:for='{{chapter.desc}}' url="/page/content/content?book_id={{item.book_id}}&chapter_id={{item.id}}" class='chapter-item border-bottom'> <text class="title">{{item.title}}</text> <text class="addtime">{{item.addtime}}</text> </navigator> <view data-sort="desc" bindtap="goChapters" class='chapter-item more-chapter border-bottom'>查看更多章节<font class="iconfont icon-gengduo"></font></view> </swiper-item> </swiper></view>
wxss
.swiper-box { display: block; height: 100%; width: 100%; overflow: hidden; box-sizing: border-box;}.swiper-box .chapter-item { display: flex; justify-content: space-between; padding: 0 20rpx; line-height: 90rpx;}.swiper-box .chapter-item .title { overflow: hidden; text-overflow: ellipsis;}.swiper-box .chapter-item .title,.swiper-box .chapter-item .addtime { white-space: nowrap; display: inline-block;}.swiper-box .more-chapter { line-height: 120rpx; justify-content: center;}
版本 ios 10.3.2
将 navgator 换成 view 后,此问题还是存在。
明白你的问题了。怀疑与 .navgator-hover 中指定的某些样式有关(有些样式会引起iOS下的重绘bug)。目前看来,比较可疑的样式是“transition”和与透明度相关的样式。麻烦去掉这些再看看有没有问题。
明白你的问题了。怀疑与 .navgator-hover 中指定的某些样式有关(有些样式会引起iOS下的重绘bug)。
目前看来,比较可疑的样式是“transition”和与透明度相关的样式。麻烦去掉这些再看看有没有问题。
尝试LastLeaf 你说的上述方案后没有解决此问题, .navgator-hover默认有透明度样式,于是添加hover-class="none"去掉了hover后发现,空白的地方通过hover也显示不出来了。
http://weibo.com/tv/v/F6J03im6T?fid=1034:3eca3314109f6a312fa9ae079122aeda
录了个BUG复现的视频
navigator 按住的样式啊 .navgator-hover 里面的 现在问题是很大概率下面会有一部分空白 不是样式的问题,肯定是渲染出来了,hover一下就出现了。
调试工具上不会有这种问题
navigator 组件的样式
正在加载...
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
这个问题有进展了吗?我遇到了类似的问题。
swiper-item 里只要出现过类似「高亮」样式后,重新回到 swiper-item 就会有部分变成空白:
翻到五月份,高亮 4 号,翻回 4月份再翻到 5 月份的过程中(不释放 touch)只渲染到高亮的 4 号,后面所有的日期都没有渲染。翻到 5 号后(释放 touch),所有元素正常显示。
高亮样式:
.current-date {
color
:
white
;
position
:
relative
;
}
.current-date:before {
content
:
''
;
display
:
block
;
position
:
absolute
;
border-radius:
50%
;
margin
:
auto
;
left
:
0
;
right
:
0
;
width
:
54
rpx;
height
:
54
rpx;
z-index
:
-1
;
top
:
0
;
bottom
:
0
;
}
wxml 中如此填入样式:
<swiper-item>
<view wx:for=
"{{dates}}"
class=
"date{{currentDate == item.date) ? ' current-date' : ''}}"
>5</view>
</swiper-item>
wxml
wxss
版本 ios 10.3.2
将 navgator 换成 view 后,此问题还是存在。
尝试LastLeaf 你说的上述方案后没有解决此问题, .navgator-hover默认有透明度样式,于是添加hover-class="none"去掉了hover后发现,空白的地方通过hover也显示不出来了。
http://weibo.com/tv/v/F6J03im6T?fid=1034:3eca3314109f6a312fa9ae079122aeda
录了个BUG复现的视频
navigator 按住的样式啊 .navgator-hover 里面的 现在问题是很大概率下面会有一部分空白 不是样式的问题,肯定是渲染出来了,hover一下就出现了。
调试工具上不会有这种问题
navigator 组件的样式