收藏
回答

当下拉scroll-view,清空内容时,自定义title错位

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug view、scroll-view 微信iOS客户端 7.0.14 2.5.2和2.11.3

代码片段在后面,不知道为啥我的开发者工具代码片段界面没有分享按钮

复现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({
      datathis.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 {
  height100vh;
}

.navBar {
  position: fixed;
  top0;
  z-index100000;
  width100%;
  color: black;
  background-color#fff;


  text-align: center;
  padding-top30px;
}
.navBar::before {
  position: absolute;
  top: -3px;
  right0;
  left0;
  z-index100000;
  width100%;
  height3px;
  background-color#000;
  content"";
}
.navHolder {
  display: block;
  width107px;
  height64px;
}
最后一次编辑于  2020-07-08
回答关注问题邀请回答
收藏

2 个回答

登录 后发表内容
问题标签