方案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
原理就是:数据不足时,用一个比scroll-view的高度还大1px的“没有更多数据“的view来撑高度
我说的对的话请给我一个👍
设置scroll-view为position: absolute; 或 relative;
然后在scroll-view里加一个
<view style="width:2rpx;height:2rpx;bottom:-2rpx;position:absolute;" /> 要得不?
反正有数据时,这个东西也不会是最下面的东东;
如果没数据时,这个玩意儿能不能造成滚动内部数据高一个像素出去? --- 我主要是担心 absolute的能不能撑高 scroll-view 的 contentSize
在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是不是会更好呢(。◕ˇ∀ˇ◕)