收藏
回答

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-05-30

    同bug 解决了吗


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

    解决了吗

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

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

    2021-03-09
    有用
    回复
  • logic
    logic
    2021-01-28

    2021-01-28
    有用
    回复
  • ABC
    ABC
    2020-11-18

    同此问题,请问一下解决了吗

    2020-11-18
    有用
    回复 2
    • logic
      logic
      2021-01-28
      enhanced设置为false
      2021-01-28
      回复
    • Excellent
      Excellent
      2021-02-08回复logic
      默认不就是false嘛,逗我吧
      2021-02-08
      回复
  • Cjiang
    Cjiang
    2020-10-27

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

    2020-10-27
    有用
    回复 23
    • H
      H
      2020-10-27
      这是自动回复么?


      机型:iPhone XR
      ios系统版本:13.3.1
      微信版本号:7.0.13
      基础库:2.12.2
      代码片段:https://developers.weixin.qq.com/s/6q8gipmi7klJ
      2020-10-27
      回复
    • Cjiang
      Cjiang
      2020-10-28回复H
      麻烦详细地描述下复现的流程,提供下复现的视频看看(可上传至腾讯视频https://v.qq.com/)。
      2020-10-28
      回复
    • H
      H
      2020-10-29回复Cjiang
      1、开发工具打开代码片段
      2、用微信扫描预览二维码打开小程序预览
      3、滚动页面至底部,就可以看见空白区域
      2020-10-29
      回复
    • Cjiang
      Cjiang
      2020-11-02回复H
      出现空白自查下是否是数据没渲染上去。
      2020-11-02
      回复
    • H
      H
      2020-11-03回复Cjiang
      确认数据已经渲染完了,代码片段里面初始渲染30条数据,页面上也显示了30条,手机预览底部出现了大量空白,通过vconsole查看容器高度是不包含空白区域的高度,不知道这个空白高度是怎么出现的。
      2020-11-03
      回复
    查看更多(18)
  • H
    H
    2020-10-27

    注释包裹元素scroll-content后,空白出现在顶部

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


    2020-10-27
    有用
    回复

正在加载...

登录 后发表内容
问题标签