本文主要介绍微信小程序中怎样实现分页加载的内容，对于分页加载的功能还是比较常见的，应用场景有很多，像微信朋友圈，微博，新闻类网站等等这些，因为数据信息很多，分页加载的功能有很大用处，能很好的提高用户体验。那么下面我们就来看一个微信小程序实现分页加载的示例，需要的朋友可以参考。

数据来自于后端（lumen带分页）

/**
   * @todo 获取订单列表
   * @return mixed
   */
  public function getOrderList(){
    $field = ['id','order_no','name','created_at','desc','order_status','pay_status'];
    $orders = Order::where('uid',$this->user->id)->orderBy('created_at', 'desc')->paginate(5, $field);
    return $orders;
}

数据

..wxjs

const util = require('../../utils/util.js');
Page({
 /**
 * 页面的初始数据
 */
 data: {
  // 前台显示list
  showlist: [],
  // 初始化page
  page: 2,
  height:600,
 },
 onLoad: function (options) {
  var self = this;
  // 请求后台 
  util.ajax('order/get' , '', 'GET', res => {
    self.setData({
     showlist: res.data,
    })
  })
 },
 /**
 * 页面上拉触底事件的处理函数
 */
 upcroll: function (e) {
  var self = this;
  var page = self.data.page++;
  // 请求后台，获取下一页的数据。
  util.ajax('order/get?page=' + page, '', 'GET', res => {
   self.setData({
    //向页面已有数据后面加数据
    showlist: self.data.showlist.concat(res.data),
   })
   if (res.data=='') {
    wx.showToast({
     title: '没有更多数据',
    })
   }
  })
 }
})

..wxml

<view class='warp'>
<view class='container' >
 <scroll-view scroll-y='true' style="height:{{height}}px" bindscrolltolower="upcroll" lower-threshold="20" >
  <view class='alllist' wx:for="{{showlist}}" wx:for-item="j" wx:key="key" name="info_border">
  <view class='list'>
  <view class='img'>
   <image src='../../imges/imgicon/icon2.png' class='img'></image>
   <view class='text'>{{j.name}}</view>
  </view>
  <view class='message'>
   <view class='te'><text class='text'>日期：</text><text class='text cor'>{{j.created_at}}</text></view>
   <view class='te text on'><text class='text'>描述：</text>{{j.desc}}</view>
  </view>
  </view>
  <view class='text statsin'>
  <view class='a left'>
  <navigator url='#' class='waiting' >待接单</navigator>
  </view>
  <view class='a'>
  <navigator url='#' class='okorder'>已完成</navigator>
  </view>
  </view>
 </view>
 </scroll-view>
 </view> 
</view>

结果：

    以上就是微信小程序实现分页加载的代码，这里只是分析了一种实现方法，仅供参考，希望能对大家有帮助，想要了解更多可以继续浏览群英网络其他相关的文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 微信小程序实现五星评价功能

  小程序五星评价怎样做的，代码是什么？在实际项目的操作过程或是学习过程中，不少人都会遇到这样的问题，接下来就让小编带大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

• 浅谈JS种哪些少见的运算符和操作符

  对于JS的运算符和操作符大家应该都比较熟悉，例如+、-、++、=、！等等这些都是比较常见的，但是JavaScript运算符和操作符有很多，有很比较少见的运算符和操作符，很多人可能都了解，因此这篇文章就给大家介绍一下这一下比较少见的运算符和操作符，感兴趣的朋友可以了解看看。

• JS事件对象是什么意思？事件对象中有哪些属性和方法？

  本文给大家介绍的是JS事件对象的内容，那JS中“事件对象”，到底是什么意思的？其实JS事件对象并不难理解，接下来我们就详细的了解一下JS事件对象，及事件对象中的属性和方法，感兴趣的朋友就继续往下看吧。

• 怎样用js写一个循环轮播图的效果？

  怎样用js实现循环轮播图？对于轮播图的应用场景有很多，但是一些新手可能对于循环轮播图的实现不是很了解，对此这篇文章就给大家分享怎样用js写一个循环轮播图的代码，感兴趣的朋友可以参考。

• JS的URL对象怎样理解？有什么用？

  本文主要给大家分享JS的URL对象的内容，一些朋友可能对JS的URL对象及使用不是很了解，因此这篇文章就给大家来详细的介绍一下JS的URL对象，感兴趣的朋友可以了解看看。