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


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 相关文章推荐
动态加载jquery库的方法
Feb 12 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
angular 基于ng-messages的表单验证实例
May 04 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
js闭包学习心得总结
Apr 17 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 Javascript
js实现菜单跳转效果
Dec 11 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加密解密的代码
2006/10/09 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
js日历功能对象
2012/01/12 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
python计算方程式根的方法
2015/05/07 Python
Python反射的用法实例分析
2018/02/11 Python
详解python-图像处理(映射变换)
2019/03/22 Python
python 为什么说eval要慎用
2019/03/26 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
python输出带颜色字体实例方法
2019/09/01 Python
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
营业员演讲稿
2013/12/30 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
技能培训通讯稿
2015/07/18 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
电力培训学习心得体会
2016/01/11 职场文书
redis实现的四种常见限流策略
2021/06/18 Redis
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB