收藏
回答

scroll-view内顶部溢出内容下拉时无法显示

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug scroll-view 客户端 iOS 1.02.1804120 2.0.5

- 需求描述

购物车页面,顶部是地址选择栏(80rpx),中间是购物车商品列表,底部是结算栏(110rpx)。禁用页面的滚动,让顶部栏、底部栏固定在页面顶部和底部,列表用scroll-view放在页面中间提供滚动效果。

======

现在需要给购物车列表添加下拉刷新功能,需要加入一个下拉后可以看见的加载提示view,但是放在scroll-view中超出页面顶部范围的后其内容全部不渲染,设置overflow也没有效果,以下是我的做法:

wxml:

<scroll-view class="cart-list" scroll-y="{{true}}">
    <view class="inner-view">
        <view class="header">
        </view>
        <view class="list-item" wx:for="{{cartList}}" wx:key="{{id}}">中间购物车内容省略...</view>
    </view>
</scroll-view>     

wxss:

.cart-list {
    positionabsolute;
    width100%;
    top80rpx;
    bottom110rpx;
    overflowvisible;
}
 
scroll-view .inner-view {
    positionrelative;
    width100%;
    overflowvisible;
}
 
scroll-view .inner-view .header {
    width100%;
    height100rpx;
    background-color:  red;
    positionabsolute;
    top-100rpx;
    z-index50;
}
 
 
.list-item {
    positionrelative;
    width100%;
    height260rpx;
    border-bottom1px solid #dcdcdc;
}

列表下拉时无法看见.header

另外,如果将.header中top改成-50rpx,则可以看见一半高度的红色,下拉仍然无法看见超出的部分,如下图


效果截图:

(1)top为-100rpx时

(2)top为-50rpx时



- 希望提供的能力

scroll-view内部的超出内容可用overflow控制显示


回答关注问题邀请回答
收藏

5 个回答

  • 小程序运营专员 - cunjin
    小程序运营专员 - cunjin
    2018-05-15

    具体哪里不渲染?看调试header已经出来了,只是header里面是空的

    2018-05-15
    有用
    回复 1
    • 🍍Horace
      🍍Horace
      2018-05-15
      header是红色的,height: 100rpx; position: absolute; 第一张截图中 top: -100rpx; scrollView往下拉【看不见红色header】 第二张截图中 top: -50rpx; scrollView往下拉 看见【一半】的红色header
      2018-05-15
      回复
  • MQ🍭
    MQ🍭
    2023-09-07

    出现了同样的问题,你解决了吗

    2023-09-07
    有用
    回复
  • 麦世荣🍔
    麦世荣🍔
    2020-05-05

    有没有结果?

    2020-05-05
    有用
    回复
  • 玉箫郎君
    玉箫郎君
    2018-05-15

    我也遇到了scroll-view内部的绝对定位元素,如果定位超出scroll-view的可视区域,甚至在scroll-view的padding区域,都无法显示的问题。

    2018-05-15
    有用
    回复 1
    • 🍍Horace
      🍍Horace
      2018-05-16
      底部超出貌似还是能通过滚动看到,但从顶部超出的内部元素无法显示
      2018-05-16
      回复
  • 🍍Horace
    🍍Horace
    2018-05-14

    hello?沉了吗

    2018-05-14
    有用
    回复
登录 后发表内容