scroll-view 组件子元素高度不够无法刷新解决办法
发布于 4 年前 作者 fshao 991 次浏览 来自 分享

主要就是给 scroll-view 添加一个比它大1个像素的子元素，然后在子元素中进行列表的渲染。这1px，虽不尽人意，但是也解决了卡着不能刷新的问题。

<scroll-view scroll-y style="width: 100%;height: calc(100vh - 205rpx);"
               refresher-enabled="{{true}}"
               refresher-threshold="{{100}}"
               refresher-default-style="black"
               refresher-triggered="{{listTopLoading}}"
               bindrefresherrefresh="onResetLoadList"
               bindscrolltolower="onPageLoadList"
               lower-threshold="0">
  <view style="width: 100%;height: calc(100vh - 205rpx + 1px);overflow: auto;">
    <block wx:for="{{dataList}}" wx:key="index">
      <view>{{item.id}}</view>
    </block>
    <view wx:if="{{listNoMore}}"
          style="text-align: center;display: flex;justify-content: center;align-items: center;margin: 30rpx 0">
      <wux-icon type="md-happy" color="#999" size="18"/>
      <text style="color: #999;margin-left: 5px">没有更多数据了</text>
    </view>
  </view>
</scroll-view>

继该方案之后又出现问题了，就是有时刷新下拉和列表下拉冲突，导致不能列表下拉，所以，最后我选择了把比 scroll-view 大一个像素的子元素放到了没有更多数据上，列表的渲染还在 scroll-view 里。

<scroll-view scroll-y style="width: 100%;height: calc(100vh - 205rpx);"
               refresher-enabled="{{true}}"
               refresher-threshold="{{100}}"
               refresher-default-style="black"
               refresher-triggered="{{listTopLoading}}"
               bindrefresherrefresh="onResetLoadList"
               bindscrolltolower="onPageLoadList"
               lower-threshold="0">
  <block wx:for="{{dataList}}" wx:key="index">
    <view>{{item.id}}</view>
  </block>
  <view wx:if="{{listNoMore}}" style="width: 100%;height: calc(100vh - 205rpx + 1px);overflow: auto;">
    <view style="text-align: center;display: flex;justify-content: center;align-items: center;margin: 30rpx 0">
      <wux-icon type="md-happy" color="#999" size="18"/>
      <text style="color: #999;margin-left: 5px">没有更多数据了</text>
    </view>
  </view>
</scroll-view>
6 回复

原理就是：数据不足时，用一个比scroll-view的高度还大1px的“没有更多数据“的view来撑高度

我说的对的话请给我一个👍

在scroll-view下面的标签上加一个padding-bottom。自己试出来的 有效果

.outer {
  height: 100%;
  width: 100%;
  padding-bottom:10vh;
}

在scroll view标签的子标签里加个padding-bottom就好了 自己试出来的 有效

<scroll-view
...
>
  <view style="width:100%;height:100%;padding-bottom: 20vw;">
  </view>
</scroll-view>

大一个像素用min-height是不是会更好呢(｡◕ˇ∀ˇ◕)

设置scroll-view为position: absolute; 或 relative;

然后在scroll-view里加一个

<view style=“width:2rpx;height:2rpx;bottom:-2rpx;position:absolute;” /> 要得不?

反正有数据时，这个东西也不会是最下面的东东；

如果没数据时，这个玩意儿能不能造成滚动内部数据高一个像素出去? — 我主要是担心 absolute的能不能撑高 scroll-view 的 contentSize

可真是个小机灵鬼

回到顶部