微信小程序实现分页加载效果

 更新时间:2020-11-19 17:00:32   作者:佚名   我要评论(0)

分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,QQ,微信朋友圈以及新闻类应用,都会有分页加载的功能,这不仅节省了我们用户的流量,还提升了用

分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,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?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>

结果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
  • 微信小程序分页加载的实例代码
  • 微信小程序实战之上拉(分页加载)效果(2)

相关文章

  • 微信小程序实现分页加载效果

    微信小程序实现分页加载效果

    分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,QQ,微信朋友圈以及新闻类应用,都会有分页加载的功能,这不仅节省了我们用户的流量,还提升了用
    2020-11-19
  • Java如何利用状态模式(state pattern)替代if else

    Java如何利用状态模式(state pattern)替代if else

    大多数开发人员现在还在使用if else的过程结构,曾看过jdon的banq大哥写的一篇文章,利用command,aop模式替代if else过程结构。当时还不太明白,这几天看了《重构》
    2020-11-19
  • JavaScript构造函数原理及实现流程解析

    JavaScript构造函数原理及实现流程解析

    在学习构造函数之前我们需要知道我们学习构造函数需要学习什么: 1.什么是构造函数 2.构造函数用来做什么 3.构造函数的执行过程 4.构造函数的返回值 1.所以首先我们
    2020-11-19
  • Docker重命名镜像名称和TAG操作

    Docker重命名镜像名称和TAG操作

    使用docker images时,可能会出现REPOSITORY和TAG均为none的镜像,如下图 这时,我们可以重命名镜像 # docker tag IMAGEID(镜像id) REPOSITORY:TAG(仓库:标签)
    2020-11-19
  • C# 设置防火墙的创建规则

    C# 设置防火墙的创建规则

      对于某些程序,我们只允许它使用某些特定端口、网络类型或者特定IP类型等信息。这时候,需要使用到防火墙里面的“高级设置”,创建某些特定的入站或者出栈规则,
    2020-11-19
  • JS数据类型分类及常用判断方法

    JS数据类型分类及常用判断方法

    数据类型判断的方法 在探索数据类型判断方法的时候我们需要知道JS中有哪些数据类型: 我们可以把JS中数据类型分为两类: 1.基本数据类型:Undefined、Null、B
    2020-11-19
  • c# 字段和方法设计建议

    c# 字段和方法设计建议

    1、不要为抽象类提供公开的构造方法   抽象类可以有构造方法,但是抽象类不能实例化。如果编程人员没有制定构造方法,编译器会自动生成一个默认的protected构造方
    2020-11-19
  • 如何扩展Spring Cache实现支持多级缓存

    如何扩展Spring Cache实现支持多级缓存

    为什么多级缓存 缓存的引入是现在大部分系统所必须考虑的 redis 作为常用中间件,虽然我们一般业务系统(毕竟业务量有限)不会遇到如下图 在随着 data-size 的增大和
    2020-11-19
  • H5 js点击按钮复制文本到粘贴板

    H5 js点击按钮复制文本到粘贴板

    本文实例为大家分享了js点击按钮复制文本到粘贴板的具体代码,供大家参考,具体内容如下 准备:先去下载clipboard.js: 官网 移动端效果如下: 应用:html+js 代码
    2020-11-19
  • Android studio配置国内镜像源的实现

    Android studio配置国内镜像源的实现

    PS:网上看到的AS配置国内镜像源的博客版本有点老了,就想着做个比较新的博客了 推荐的几个国内镜像源地址: 1、东软信息学院(笔者当前在用) mirrors.neusoft.ed
    2020-11-19

最新评论