scroll-view开启下拉刷新，内部元素使用flex布局，出现大量空白
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 [图片] 关闭下拉刷新后没有此问题。