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


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 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
用js实现计算加载页面所用的时间
Apr 02 Javascript
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
用jquery的attr方法实现图片切换效果
Feb 05 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
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的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
用穿越火线快速入门php面向对象
2012/02/22 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
详解webpack babel的配置
2018/01/09 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python 接口测试response返回数据对比的方法
2018/02/11 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
荟萃全球保健品:维他购
2018/05/09 全球购物
法学函授自我鉴定
2014/02/06 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
项目投资合作意向书
2014/07/29 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
创业计划书之家政服务
2019/09/18 职场文书