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


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 相关文章推荐
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
js实现表格字段排序
Feb 19 Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
解析vue、angular深度作用选择器
Sep 11 Javascript
Electron 调用命令行(cmd)
Sep 23 Javascript
详解JavaScript中的this指向问题
Feb 05 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 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
thinkphp模板用法和内容输出实例
2014/11/28 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
js展开闭合效果演示代码
2013/07/24 Javascript
window.location不跳转的问题解决方法
2014/04/17 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
简单介绍Ruby中的CGI编程
2015/04/10 Python
在Django框架中编写Contact表单的教程
2015/07/17 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
html5读取本地文件示例代码
2014/04/22 HTML / CSS
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
银行实习鉴定
2013/12/13 职场文书
村道德模范事迹材料
2014/08/28 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
小学中队活动总结
2015/05/11 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
学校食堂管理制度
2015/08/04 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript
pycharm无法安装cv2模块问题
2022/05/20 Python
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers