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


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 相关文章推荐
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
May 16 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
Oct 24 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
Javascript中parseInt的正确使用方式
Oct 17 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 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
用session做客户验证时的注意事项
2006/10/09 PHP
PHP中extract()函数的定义和用法
2012/08/17 PHP
学习php分页代码实例
2013/10/24 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
js随机生成一个验证码
2017/06/01 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
python 编写简单网页服务器的实例
2018/06/01 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
OpenCV 模板匹配
2019/07/10 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
Python定义函数实现累计求和操作
2020/05/03 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
python爬取招聘要求等信息实例
2020/11/20 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
护士自我鉴定
2013/10/23 职场文书
聘用意向书范本
2014/04/01 职场文书
工作保证书范文
2014/04/29 职场文书
中国梦演讲稿开场白
2014/08/28 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
初一语文教学反思
2016/03/03 职场文书