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
关闭下拉刷新后没有此问题。
同bug 解决了吗
解决了吗
我也遇到了,是开启enhance属性后才出现的,但是又不得不开启,头疼
同此问题,请问一下解决了吗
你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
机型:iPhone XR
ios系统版本:13.3.1
微信版本号:7.0.13
基础库:2.12.2
代码片段:https://developers.weixin.qq.com/s/6q8gipmi7klJ
2、用微信扫描预览二维码打开小程序预览
3、滚动页面至底部,就可以看见空白区域
注释包裹元素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>