收藏
回答

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

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

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

13 个回答

  • 社区技术运营专员-CJiang
    社区技术运营专员-CJiang
    2020-10-27

    你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2020-10-27
    有用
    回复 22
    查看更多(17)
  • 🖤
    🖤
    03-14

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

    03-14
    有用 1
    回复 4
    • a'ゞvar
      a'ゞvar
      03-15
      解决了吗
      03-15
      回复
    • a'ゞvar
      a'ゞvar
      03-15
      之前是小部分苹果机会出现, 现在是大部分都会这样
      03-15
      回复
    • a'ゞvar
      a'ゞvar
      03-15
      你把这个enhanced设置为false 好像不会出现了
      03-15
      回复
    • 米奥Mio
      米奥Mio
      04-25回复a'ゞvar
      这个默认就是false,我没设置,但还是会有空白😫
      04-25
      回复
  • Lgowen
    Lgowen
    09-23

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

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

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

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

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

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

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

    +1

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

    +1

    06-16
    有用
    回复
  • 多项式时间
    多项式时间
    05-30

    同bug 解决了吗


    05-30
    有用
    回复
  • Sinsoledad
    Sinsoledad
    04-01

    解决了吗

    04-01
    有用
    回复
  • 阿顺
    阿顺
    03-09

    我也遇到了,是开启enhance属性后才出现的,但是又不得不开启,头疼

    03-09
    有用
    回复

正在加载...

登录 后发表内容
问题标签