微信小程序实现分页加载效果
作者:开猿节流 发布时间: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
投稿
猜你喜欢
- 1.基本构架:mport PIL.Image 相关模块img=Image.open(img_name) 打开图片img.save(save_
- 设计与开发之间本有一线界限,但当时代步入又一个十年,这个线变得更加模糊甚至感觉不到它的存在。使用PS设计网页版面,足矣?或许五年前是吧!现在
- 本文实例讲述了Python查找数组中数值和下标相等的元素。分享给大家供大家参考,具体如下:题目描述:假设一个单调递增的数组中的每个元素都是整
- 痛点引出在平时的开发当中,渲染侧边栏导航菜单有时会遇到过需要侧边栏有多层甚至无限层级的问题。此时更优雅的方式便是使用递归组件<el-m
- 一、概述相信大家在日常开发中,在SQL语句中经常需要进行字符串拼接,以sqlserver,oracle,mysql三种数据库为例,因为这三种
- 什么叫做SPA单页应用单页Web应用 (single page web application,SPA) ,就是只有一张
- import numpy as npimport pandas as pdimport matplotlib.pylab as pltif
- Python3 解释器Linux/Unix的系统上,一般默认的 python 版本为 2.x,我们可以将 python3.x 安装在 /us
- axios 简介axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:从浏览器中创建
- 项目总览创建虚拟环境mkvirtualenv meiduo_malls创建项目django-admin startproject meidu
- 写在前面:新型冠状病毒有多么可怕,我想大家都已经知道了。湖北爆发了新型冠状病毒,湖南前几天爆发了禽流感,四川发生地震,中国加油!昨天晚上我突
- 获得当前时间时间戳# 注意时区的设置import time# 获得当前时间时间戳now = int(time.time())# 转换为其他日
- 设计师不等于美工设计无所不在,但大多数企业不知道如何使用它。现代设计进入中国大概是二十多年的时间,而在国外,尤其在美国在欧洲,大概有一百年的
- 本文实例讲述了Python函数装饰器实现方法。分享给大家供大家参考,具体如下:编写函数装饰器这里主要介绍编写函数装饰器的相关内容。跟踪调用如
- 在flask更新到1.0之后的版本,官方推荐使用flask run的方式运行程序,可是作为开发,如果没有了pycharm的断点调试,这可太难
- 这篇文章主要介绍了python异常处理try except过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价
- 本文实例讲述了Python计算一个文件里字数的方法。分享给大家供大家参考。具体如下:这段程序从所给文件中找出字数来。from string
- 本文实例讲述了Python格式化日期时间的方法。分享给大家供大家参考,具体如下:常用的时间函数如下获取当前日期:time.time()获取元
- 在go语言中iota比较特殊,是一个被编译器修改的常量,在每一个const关键字出现时被重置为0,然后在下一个const出现之前,每出现一次
- 如下所示:#coding:utf-8import binasciia = 'worker'#先把worker转换成二进制数据