注释包裹元素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> [图片]
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 [图片] 关闭下拉刷新后没有此问题。
2020-10-27