收藏
回答

scroll-view开启下拉刷新,内部元素使用flex布局,出现大量空白

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug scroll-view 微信iOS客户端 7.0.13 2.12.2

index.wxml

<view class="page">
  <scroll-view
    class="scroll"
    style="height: 100%"
    scroll-y="{{true}}"
    enhanced="{{true}}"
    refresher-enabled="{{true}}"
    refresher-threshold="{{50}}"
    refresher-default-style="white"
    refresher-background="#eee"
  >
    <view class="scroll-content">
      <block wx:if="{{listData.length}}"></block>
      <view class="list">
        <view class="item" wx:for="{{listData}}" wx:key="id">{{item.data}}</view>
      </view>
    </view>
  </scroll-view>
</view>

index.wxss

page {
  height: 100%;
}

view,
text,
scroll-view {
  box-sizing: border-box;
}

.page {
  height: 100%;
}

.scroll-content {
  background-color: #eeeeee;
  min-height: 100%;
  border: 1px solid burlywood;
}

.scroll{
  height: 100%;
}

/* flex布局 */
.list {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  min-height: 100%;
}

.item {
  width: 100%;
  min-height: 50rpx;
  margin-top: 10rpx;
}

index.js

Page({
  data: { listData: [] },

  onLoad: function (options) {
    this.loadData();
  },

  loadData() {
    let startIndex = this.data.listData.length;
    let newData = {};
    Array.from({ length: 30 }).forEach((_, index) => {
      newData[`listData[${startIndex}]`] = {
        id: `id_${startIndex}`,
        data: `${startIndex + 1}_data_高度不定的item`,
      };
      startIndex++;
    });
    this.setData(newData);
  },
});


开发工具中没问题,ios预览滚动到底部会有大量空白高度。

机型:iPhone XR

ios系统版本:13.3.1

关闭下拉刷新后没有此问题。

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

17 个回答

  • 2021-03-14

    我也出现此问题!求解决!未使用flex布局,但是只要scroll-view内循环渲染自定义组件就会出现莫名大量空白。也是ios真机才有,PC和编译器都显示正常。

    2021-03-14
    有用 2
    回复 4
    • 华个圈圈
      华个圈圈
      2021-03-15
      解决了吗
      2021-03-15
      回复
    • 华个圈圈
      华个圈圈
      2021-03-15
      之前是小部分苹果机会出现, 现在是大部分都会这样
      2021-03-15
      回复
    • 华个圈圈
      华个圈圈
      2021-03-15
      你把这个enhanced设置为false 好像不会出现了
      2021-03-15
      回复
    • 米奥
      米奥
      2021-04-25回复华个圈圈
      这个默认就是false,我没设置,但还是会有空白😫
      2021-04-25
      回复
  • 咖喱给给
    咖喱给给
    2022-12-08

    enhanced设置false后,如果动态设置refresher-enabled的值,也是会有空白

    2022-12-08
    有用 1
    回复
  • Damon
    Damon
    2023-01-12

    真坑,我也出现了

    2023-01-12
    有用
    回复
  • momo
    momo
    2022-02-19

    有解决的吗? ios&android都有这样的问题。

    文章跳转到文章的时候,在页面A时wx.navigateTo({url: `A?id=111`}),基本每次都这样

    2022-02-19
    有用
    回复
  • Mirotic
    Mirotic
    2021-11-19

    还没解决吗

    2021-11-19
    有用
    回复
  • Lgowen
    Lgowen
    2021-09-23

    同ios真机底部会有大量空白可滑动区域

    2021-09-23
    有用
    回复 1
    • Lgowen
      Lgowen
      2021-09-23
      想问一下这个现在有解决方案了吗
      2021-09-23
      回复
  • 隔壁老张
    隔壁老张
    2021-09-02

    碰到同样问题了,楼主的demo我运行了一下 可以复现 症状一样

    几乎能搜到的办法都试了 问题依然没有解决,持续关注...

    1. scroll-view内部使用自定义组件(业务原因需要复用组件 内部存在大量逻辑 埋点等等)
    2. enhanced未设置(设置为false依然存在bug)
    3. 内容修改为非flex布局问题依然存在
    2021-09-02
    有用
    回复
  • 2021-09-01

    bug到现在都没解决吗?+1

    2021-09-01
    有用
    回复
  • 电单车
    电单车
    2021-07-26

    +1

    2021-07-26
    有用
    回复
  • _Xq
    _Xq
    2021-06-16

    +1

    2021-06-16
    有用
    回复

正在加载...

登录 后发表内容
问题标签