代码片段在后面,不知道为啥我的开发者工具代码片段界面没有分享按钮
复现BUG的关键条件:
1.首先你需要自己写一个自定义title
2.view包裹scroll-view标签
3.view同时有”position: relative;width:100%;height:calc(100vh - 64px);“属性
4.view和scroll-view同时设置height属性
5.scroll-view内部元素总体高度大于scroll-view的height,即产生滚动条
6.scroll-view内部的滚动条进行上拉造成"橡皮筋回弹"效果后,清空scroll-view内部元素
注意:完成前5项之后,进行6操作。
复现BUG成功案例:
目前暂时的解决办法:在业务方面,采取去掉最外层高度属性,禁止page滑动。
代码片段:
// index.js
const app = getApp();
Page({
data: {
title: "测试",
data: [
{
msg: "11111",
},
],
},
onButtonTap(e) {
const i = e.currentTarget.dataset.index;
this.setData({
data: this.data.data.filter((item,index) => {
if(i===index) return false;
return true;
})
},)
}
});
-----------------分割线------------------
// index.html
<view class="nav-container">
<view class="navBar">{{ title }}</view>
<view class="navHolder"></view>
</view>
<view class="list" style="overflow: hidden;position: relative;width: 100%;height:200px;">
<scroll-view style="height:200px" scroll-y="true">
<view wx:for="{{data}}" wx:key="index"
style="position:relative;height:300px;background:red;">
<button bindtap="onButtonTap" data-index="{{index}}"
style="position: absolute;bottom: 0;">delete</button>
</view>
</scroll-view>
</view>
-----------------分割线------------------
// index.wxss
page {
height: 100vh;
}
.navBar {
position: fixed;
top: 0;
z-index: 100000;
width: 100%;
color: black;
background-color: #fff;
text-align: center;
padding-top: 30px;
}
.navBar::before {
position: absolute;
top: -3px;
right: 0;
left: 0;
z-index: 100000;
width: 100%;
height: 3px;
background-color: #000;
content: "";
}
.navHolder {
display: block;
width: 107px;
height: 64px;
}
该问题是ios webview 的问题,暂时修复不了,建议开发者自行规避
你好,是使用以上代码可以复现问题吗?这边未复现,请提供这种格式的代码片段看下(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)