我爱小程序
| 问题模块 | 框架类型 | 问题类型 | API/组件名称 | 终端类型 | 操作系统 | 微信版本 | 基础库版本 |
|---|---|---|---|---|---|---|---|
| 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 { position: absolute; width: 100%; top: 80rpx; bottom: 110rpx; overflow: visible;}scroll-view .inner-view { position: relative; width: 100%; overflow: visible;}scroll-view .inner-view .header { width: 100%; height: 100rpx; background-color: red; position: absolute; top: -100rpx; z-index: 50;}.list-item { position: relative; width: 100%; height: 260rpx; border-bottom: 1px solid #dcdcdc;} |
列表下拉时无法看见.header
另外，如果将.header中top改成-50rpx，则可以看见一半高度的红色，下拉仍然无法看见超出的部分，如下图
效果截图：
（1）top为-100rpx时
（2）top为-50rpx时
- 希望提供的能力
scroll-view内部的超出内容可用overflow控制显示
网友回复
玉箫郎君：
我也遇到了scroll-view内部的绝对定位元素，如果定位超出scroll-view的可视区域，甚至在scroll-view的padding区域，都无法显示的问题。
cunjinli：
具体哪里不渲染？看调试header已经出来了，只是header里面是空的
?Horace：
hello？沉了吗