微信小程序上拉加载更多 - 好文

一、代码环境

一开始用的是scroll-view组件，但是真机运用的时候发现上拉加载更多的时候，数据有跳动，对用户交互及其不友好，所以决定修改上拉加载更多的效果

我用的是wepy框架，参照多个网上文档，也参照官方文档主要用的是onReachBottom()事件

二、代码

视图层：
<repeat for="{{recordList}}" key="index" index="index" item="item" > <view
class="zan-panel"> <view class="zan-cell"> <view
class="zan-cell__bd">变更内容：{{item.typeText}}</view> <view
class="zan-cell__ft">￥<text
style="padding-left:4rpx">{{item.totalFee/100}}</text></view> </view> <view
class="zan-cell"> <view class="zan-cell__bd zan-font-12
zan-c-gray-dark">变更时间：{{item.updateTime}}</view> </view> </view> </repeat>
<block wx:if="{{recordList.length > pageSize}}"> <block
wx:if="{{updateLoadShow}}"> <updateLoad :loading="updateLoadShow"></updateLoad>
</block> <view class="doc-description zan-center" style="font-size:12px;"
wx:else> <text>{{updateLoadTxt}}</text> </view> </block>
说明：如果数据不超过一屏，向上拉回无法触发onReachBottom()事件，所以我做的处理是 “ （当前屏幕高度 / 实际一个列表循环高度
）+1”，保证数据能超过一屏。
onLoad() { // 获取系统消息 wepy.getSystemInfo({ success: (res) => { this.height =
res.windowHeight this.pageSize = Math.round(res.windowHeight / 103) + 1
this.$apply() } }) }

逻辑层写：
// 上拉加载 onReachBottom() { // 上拉加载更多loading this.updateLoadShow = true let
_length = this.recordList.length // 列表长度与列表总数对比 if (_length === this.pagtotal)
{ setTimeout(() => { this.updateLoadShow = false this.$apply() }, 1000) } else
{ // 当前页码加一 this.pageNum++ // 更新数据 this.getData() } } // 获取数据 getData() { const
pageNum = this.pageNum api.get(recordURL + 'queryBalanceSub?start=' + pageNum +
'&size=' + this.pageSize + '&sortStr=update_time&sortType=desc').then(({data})
=> { if (pageNum === 1) { this.recordList = data.list this.pagtotal =
data.totalRow } else { this.recordList = this.recordList.concat(data.list) }
this.loadingShow = false this.updateLoadShow = false this.$apply() }) }

---
2018-11-23修-----------------------------------------------------------------------------------------------------------

bug: 第一次下拉不显示‘加载中...’，实际是在数据请求，会延迟几秒显示，或是需要多向上拉几次（具体多久就需要看请求的速度啦）

解决方案：问题在于在视图层的时候限制了页面显示最大数量，因为视图层加了判断条件“数据列表的长度大于加载数，才显示加载中组件”。现在只需要修改下加载数
pageSize-1，那么问题就解决了

修复后代码：

热门工具换一换