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


Posted in Javascript onNovember 19, 2020

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

结果:

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

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

Javascript 相关文章推荐
限制文本框输入N个字符的js代码
May 13 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
7个你应该知道的JS原生错误类型
Apr 29 Javascript
JavaScript的Set数据结构详解
Feb 18 Javascript
微信小程序 WeUI扩展组件库的入门教程
Apr 21 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 #Vue.js
H5 js点击按钮复制文本到粘贴板
Nov 19 #Javascript
JS数据类型分类及常用判断方法
Nov 19 #Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 #Javascript
javascript this指向相关问题及改变方法
Nov 19 #Javascript
JavaScript实现alert弹框效果
Nov 19 #Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 #Vue.js
You might like
发一个php简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
php内嵌函数用法实例
2015/03/20 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
王纯业的Python学习笔记 下载
2007/02/10 Python
Python中生成器和yield语句的用法详解
2015/04/17 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
python单例设计模式实现解析
2020/01/07 Python
Python实现AI换脸功能
2020/04/10 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
Django配置跨域并开发测试接口
2020/11/04 Python
法国足球商店:Footcenter
2019/07/06 全球购物
实习生个人的自我评价
2013/12/08 职场文书
政法大学毕业生自荐信范文
2014/01/01 职场文书
上课玩手机检讨书
2014/02/08 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
授权委托书格式模板
2014/04/03 职场文书
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript