微信小程序实例代码：上拉加载更多的实现方法

百变鹏仔 6天前 #前端问答

文章标签实例

本篇文章给大家带来的内容是关于微信小程序实例代码：上拉加载更多的实现方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

一、代码环境

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

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

二、代码

视图层：

<repeat>   <view>      <view>         <view>变更内容：{{item.typeText}}</view>         <view>￥<text>{{item.totalFee/100}}</text></view>      </view>      <view>         <view>变更时间：{{item.updateTime}}</view>      </view>   </view></repeat><block> pageSize}}"&gt;   <block>      <updateload></updateload>   </block>   <view>      <text>{{updateLoadTxt}}</text>   </view></block>

说明：如果数据不超过一屏，向上拉回无法触发onReachBottom()事件，所以我做的处理是 “ （当前屏幕高度 / 实际一个列表循环高度）+1”，保证数据能超过一屏。

onLoad() {    // 获取系统消息    wepy.getSystemInfo({      success: (res) =&gt; {        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(() =&gt; {        this.updateLoadShow = false        this.$apply()      }, 1000)    } else {      // 当前页码加一      this.pageNum++      // 更新数据      this.getData()    }}// 获取数据getData() {    const pageNum = this.pageNum    api.get(recordURL + 'queryBalanceSub?start=' + pageNum + '&amp;size=' + this.pageSize + '&amp;sortStr=update_time&amp;sortType=desc').then(({data}) =&gt; {      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()    })  }

文章推荐

微信小程序实例代码：上拉加载更多的实现方法

揭秘：魏则西离去真正的原因（派代网）

拒绝做微商被屏蔽拉黑，方法我有！（派代网）

【派代&amp;生意参谋电商论剑征文大赛】重磅！不看江湖地位，只论技法高下，等你来战！（）

寻洲：微商警戒线，你知道几个？

拒绝做微商被屏蔽拉黑，方法我有！（）

【派代&生意参谋电商论剑征文大赛】重磅！不看江湖地位，只论技法高下，等你来战！（）