评论

scroll-view 组件子元素高度不够无法刷新解决办法

关于小程序 scroll-view 组件自定义下拉刷新,子元素高度不足时出现下拉不出来的情况解决办法

方案1

主要就是给 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>

方案2

这个比较好

<scroll-view  ...>
  <block wx:for="{{dataList}}" wx:key="index">
    <view>{{item.id}}</view>
  </block>
  <view style="width:2rpx;height:2rpx;bottom:-2rpx;position:absolute;" />
</scroll-view>

code by @eric

方案3

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

code by @Br🐳uce

最后一次编辑于  2020-03-20  
点赞 2
收藏
评论

6 个评论

  • 郑钱花
    郑钱花
    2020-03-10

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

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

    2020-03-10
    赞同 2
    回复
  • Archangelᴱᴿᴵᑦ
    Archangelᴱᴿᴵᑦ
    2020-03-19

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

    然后在scroll-view里加一个

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

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

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

    2020-03-19
    赞同 1
    回复
  • Br🐳uce
    Br🐳uce
    2020-03-19

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

    .outer {
      height: 100%;
      width: 100%;
      padding-bottom:10vh;
    }
    
    2020-03-19
    赞同
    回复
  • Br🐳uce
    Br🐳uce
    2020-03-19

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

    <scroll-view
    ...
    >
      <view style="width:100%;height:100%;padding-bottom: 20vw;">
      </view>
    </scroll-view>
    
    2020-03-19
    赞同
    回复
  • ZENJ°
    ZENJ°
    2020-03-19

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

    2020-03-19
    赞同
    回复 1
    • Archangelᴱᴿᴵᑦ
      Archangelᴱᴿᴵᑦ
      2020-03-19
      如果scroll-view里没有包含一个内层wrapper则这个min-height:120%无处安放.
      2020-03-19
      回复
  • Stephen
    Stephen
    2020-03-15
    可真是个小机灵鬼
    2020-03-15
    赞同
    回复
登录 后发表内容