小程序开发中怎么样实现一个分页加载功能

发布时间：2020-11-20 14:51:03 来源：亿速云阅读：215 作者：Leah 栏目：开发技术

本篇文章为大家展示了小程序开发中怎么样实现一个分页加载功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

分页加载功能大家遇到的应该会经常遇到，应用场景也很多，例如微博，QQ，微信朋友圈以及新闻类应用，都会有分页加载的功能，这不仅节省了我们用户的流量，还提升了用户体验。那么今天的这篇文章就是介绍微信小程序中如何实现分页加载的功能。

数据来自于后端（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&#63;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'  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>

结果：

小程序开发中怎么样实现一个分页加载功能

上述内容就是小程序开发中怎么样实现一个分页加载功能，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。

向AI问一下细节

小程序开发中怎么样实现一个分页加载功能

猜你喜欢

最新资讯

相关推荐

相关标签