微信小程序实现分页加载效果
作者:开猿节流 时间:2024-06-15 03:33:57
分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,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>
结果:
来源:https://blog.csdn.net/qq_38191191/article/details/81665159
标签:微信小程序,分页,加载
0
投稿
猜你喜欢
如何在网页显示英语音标(附实例)
2010-01-12 17:07:00
改进评论提交表单
2009-03-25 20:37:00
MySQL常用命令与内部组件及SQL优化详情
2024-01-17 12:50:41
python获取图片颜色信息的方法
2023-11-10 16:40:41
Python协程的用法和例子详解
2022-02-15 14:01:57
js的Prototype属性解释及常用方法
2024-06-07 16:00:32
详解Django之admin组件的使用和源码剖析
2022-10-07 06:36:27
Mysql环境变量配置方式
2024-01-25 22:41:30
python中字典按键或键值排序的实现代码
2023-07-22 00:26:49
python基础教程之元组操作使用详解
2023-11-29 01:18:52
js字放大效果
2010-09-07 12:18:00
Python+Opencv实战之人脸追踪详解
2022-09-22 16:03:38
js生成随机数(指定范围)的实例代码
2024-04-17 10:29:42
提升Python程序性能的7个习惯
2021-09-11 04:05:07
解决MySQL 5数据库连接超时问题
2009-03-25 15:24:00
python3安装speech语音模块的方法
2023-03-24 12:09:32
Python if else条件语句形式详解
2021-09-21 06:48:24
Vue+Axios实现文件上传自定义进度条
2024-05-29 22:24:57
成为一个顶级设计师的第一准则
2008-04-18 10:29:00
Python Django框架模板渲染功能示例
2023-03-12 17:39:03