收藏
回答

ios上swiper内显示出现一部分空白的bug

我在swiper内使用了wx:for循环实现如下图1效果:

但是很大概率会出现内容不显示的问题(如图2),按住不显示的地方又会显示出来了(如图3)




回答关注问题邀请回答
收藏

19 个回答

  • chord
    chord
    2018-04-09

    这个问题有进展了吗?我遇到了类似的问题。


    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: 54rpx;
      height: 54rpx;
      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>


    2018-04-09
    有用
    回复
  • 哈啾ོ Haqiuuu  🏃
    哈啾ོ Haqiuuu 🏃
    2017-06-07

    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;
    }


    2017-06-07
    有用
    回复
  • 哈啾ོ Haqiuuu  🏃
    哈啾ོ Haqiuuu 🏃
    2017-06-07

    版本 ios 10.3.2

    2017-06-07
    有用
    回复
  • 哈啾ོ Haqiuuu  🏃
    哈啾ོ Haqiuuu 🏃
    2017-06-07

    navgator 换成 view 后,此问题还是存在。

    2017-06-07
    有用
    回复
  • 哈啾ོ Haqiuuu  🏃
    哈啾ོ Haqiuuu 🏃
    2017-06-07

    明白你的问题了。怀疑与 .navgator-hover 中指定的某些样式有关(有些样式会引起iOS下的重绘bug)。


    目前看来,比较可疑的样式是“transition”和与透明度相关的样式。麻烦去掉这些再看看有没有问题。


    尝试LastLeaf 你说的上述方案后没有解决此问题, .navgator-hover默认有透明度样式,于是添加hover-class="none"去掉了hover后发现,空白的地方通过hover也显示不出来了。


    2017-06-07
    有用
    回复
  • 哈啾ོ Haqiuuu  🏃
    哈啾ོ Haqiuuu 🏃
    2017-06-07

    http://weibo.com/tv/v/F6J03im6T?fid=1034:3eca3314109f6a312fa9ae079122aeda


    录了个BUG复现的视频

    2017-06-07
    有用
    回复
  • 哈啾ོ Haqiuuu  🏃
    哈啾ོ Haqiuuu 🏃
    2017-06-07

    navigator 按住的样式啊  .navgator-hover 里面的  现在问题是很大概率下面会有一部分空白 不是样式的问题,肯定是渲染出来了,hover一下就出现了。

    2017-06-07
    有用
    回复
  • 哈啾ོ Haqiuuu  🏃
    哈啾ོ Haqiuuu 🏃
    2017-06-07

    调试工具上不会有这种问题



    2017-06-07
    有用
    回复
  • 哈啾ོ Haqiuuu  🏃
    哈啾ོ Haqiuuu 🏃
    2017-06-07

    navigator 组件的样式

    2017-06-07
    有用
    回复

正在加载...

登录 后发表内容