如何使用uview中的loadmore上拉加载

普通用法

HTML 

<view><view><!-- 内容 --></view><u-loadmore :status="status" />
</view>

JS,onReachBottom这个是生命周期,和method同级

data() {return {goods:null,status: 'loadmore',//当前状态pageSize: 20,//获取多少条数据pageNum: 1//当前页码}    
}
onReachBottom() {let that= this;that.status = 'loading';that.pageNum = ++ that.pageNum;setTimeout(() => {that.goods_list()}, 600);
},
methods: {goods_list() {let that = this//写上自己的接口that.$http.https("GET", "/index/broadcast/broadcast_goods", {'pageSize': that.pageSize,'pageNum': that.pageNum}).then(req => {if (req.data.code == 200) {//页面是1先重置if (that.pageNum === 1) {that.goods = null}//追加数据req.data.goods.forEach(data => {that.goods.push(data)})//是否最后一页if (req.data.goods.length < that.pageSize) {that.status = 'nomore';} else {that.status = 'loadmore';}} else {that.goods = nullthat.status = 'nomore';}}}
}

如果是弹窗的要用loadmore事件

HTML ,利用@touchmove.native.stop.prevent 阻止穿透

<view><u-popup :closeOnClickOverlay="true" closeIconPos="top-right" round="20" :show="goods_show" mode="bottom" @close="close" @open="open" @touchmove.native.stop.prevent>//@touchmove.native.stop.prevent 阻止穿透<view><!-- 内容 --></view><u-loadmore :status="status" @loadmore='loading' :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" /></u-popup>
</view>

JS,不再采用onReachBottom这个生命周期

data() {return {goods_show: false,goods: null,loadingText: '努力加载中...',loadmoreText: '点我加载更多',nomoreText: '宝宝底线啦',status: 'loadmore',pageSize: 20,pageNum: 1}
}
methods: {//打开时open() {let that = thisthat.pageNum = 1that.goods_list()},loading() {let that = thisthat.status = 'loading';that.pageNum = ++that.pageNum;setTimeout(() => {that.goods_list()}, 300)},goods_list() {let that = this//写上自己的接口that.$http.https("GET", "/index/broadcast/broadcast_goods", {'pageSize': that.pageSize,'pageNum': that.pageNum}).then(req => {if (req.data.code == 200) {//页面是1先重置if (that.pageNum === 1) {that.goods = null}//追加数据req.data.goods.forEach(data => {that.goods.push(data)})//是否最后一页if (req.data.goods.length < that.pageSize) {that.status = 'nomore';} else {that.status = 'loadmore';}} else {that.goods = nullthat.status = 'nomore';}}},//关闭时close() {let that = this;that.goods_show = false;that.goods = null;}
}

后端tp6

public function broadcast_goods(Request $request)
{$data = $request->get();$pagenum = ($data["pageNum"] - 1) * 20;//当前页$pagesize = $data["pageSize"];$goods = Db::query("select * from dq_goods where goods_state=1 and delete_time=0 order by goods_sort limit $pagenum,$pagesize");if (!empty($goods)){return json(['code' => 200, 'goods' => $goods, 'msg' => '查询成功']);}else{return json(['code' => 201, 'msg' => '操作成功']);}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/110435.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1208. 翻硬币

题目&#xff1a; 1208. 翻硬币 - AcWing题库 思路&#xff1a; 1.对于要求从A变化到B的这类题&#xff0c;可以采用开关控制的方法。 2.一次翻转连续两个硬币&#xff0c;求origin变为result 最少需要翻转多少次。我们在origin的两个硬币中间放一个开关&#xff0c;开关变换…

除静电感测型离子风棒在无尘车间中的应用

除静电感测型离子风棒是一种能够检测静电并及时释放离子的离子风棒&#xff0c;在无尘车间中应用非常广泛。以下是除静电感测型离子风棒在无尘车间中的应用&#xff1a; 防止静电干扰&#xff1a;在无尘车间中&#xff0c;静电干扰会影响电子元器件和仪器设备的正常工作&#x…

基于STM32设计的智慧农业管理系统(ESP8266+腾讯云微信小程序)

一、项目介绍 基于STM32设计的智慧农业控制系统(ESP8266+腾讯云微信小程序) 1.1 项目背景 随着人们对食品安全和生态环境的日益重视,智慧农业逐渐成为一个备受关注的领域。智能化管理可以提高农业生产效率,减少资源浪费,改善生态环境。因此,基于物联网技术的智慧农业管理系…

数据结构-堆排序Java实现

目录 一、引言二、算法步骤三、原理演示步骤1: 构建最大堆步骤2: 交换和堆化步骤3: 排序完成 四、代码实战五、结论 一、引言 堆排序是一种利用堆这种数据结构所设计的一种排序算法。堆是一个近似完全二叉树的结构&#xff0c;并同时满足堆积的性质&#xff1a;即子结点的键值或…

MySQL学习(八)——锁

文章目录 1. 锁概述2. 全局锁2.1 全局锁的必要性2.2 语法2.3 全局锁的特点 3. 表级锁3.1 表锁3.2 元数据锁3.3 意向锁3.4 自增锁 4. 行级锁4.1 介绍4.2 记录锁4.3 间隙锁4.4 临键锁 1. 锁概述 锁是计算机协调多个进程或线程并发访问某一资源的机制。在数据库中&#xff0c;除传…

图像分割数据集的相关操作(二)—— albumentations 数据增强

前言 相比与torchvision 的 transform 库,albumentations 库提供了更丰富的增强操作和更高的性能;albumentations 通过使用 OpenCV 库实现增强操作,它采用了基于 NumPy 数组的处理方式,并通过并行化和内存优化来提高性能。相比之下,torchvision 的 transform 库是基于 Py…

2023亚马逊下半年的旺季选品攻略,黑五网一圣诞爆单机会不再错过

万圣节、黑五、网一和圣诞节是西方重要销售活动&#xff0c;也是跨境电商的一场重要考试&#xff0c;相对于国内的双十一双十二&#xff0c;这些节日的形成更为久远&#xff0c;需求也更加深入人心&#xff01;卖家需要根据市场需求和竞争情况选择细分品类&#xff0c;为更好的…

LabVIEW建立生产者消费者

LabVIEW建立生产者消费者 生产者/消费者设计模式由并行循环组成&#xff0c;这些循环分为两类&#xff1a;生产者循环和消费者循环。生产者循环和消费者循环间的通信可以使用队列或通道连线来实现。 队列 LabVIEW内置的队列操作VI可在函数选板>>数据通信>>队列操…

Atlas 200I DK目标检测与追踪技术记录

数据集 数据集采用MOT系列&#xff0c;MOT是多目标追踪常用数据集&#xff0c;MOT数据集对数据集进行了分帧&#xff0c;如要获得视频&#xff0c;需要先利用opencv里的cv2.VideoWriter模块便利图片文件夹&#xff0c;具体代码如下&#xff1a; import os import cv2img_path…

django cloudflare csrf 403

网站套了cloudflare flare发现登录接口403了&#xff0c;csrf验证失败&#xff0c; debug设置为False 详细报错如下&#xff1a; Reason given for failure: Referer checking failed - https://xxx/login does not match any trusted origins.In general, this can occur w…

Nginx正向代理,反向代理,负载均衡

Nginx正向代理&#xff0c;反向代理&#xff0c;负载均衡 Nginx当中有两种代理方式&#xff1a; 七层代理&#xff08;http协议&#xff09; 四层代理&#xff08;tcp/udp流量转发&#xff09; 七层代理&#xff1a;七层代理&#xff0c;代理的是http的请求和响应 客户端请求…

开源Vue盲盒商城4.0源码/网页盲盒源码/前端uniapp后端thinkphp+安装教程/亲测

源码简介&#xff1a; 开源Vue盲盒商城4.0源码&#xff0c;它是打包小程序app的网页盲盒源码,亲测可用&#xff0c;它是采用vueTP5框架开发开源盲盒网站源码&#xff0c;附带了安装教程。 简单测试过了&#xff0c;可以使用&#xff0c;大家可以自测下。 前端uniapp后端think…

Elasticsearch Relevance Engine---为AI变革提供高级搜索能力[ES向量搜索、常用配置参数、聚合功能等详解]

Elasticsearch Relevance Engine—为AI变革提供高级搜索能力[ES向量搜索、常用配置参数、聚合功能等详解] 今天要介绍的 Elasticsearch Relevance Engine™ (ESRE™)&#xff0c;提供了多项用于创建高度相关的 AI 搜索应用程序的新功能。ESRE 站在 Elastic 这个搜索领域的巨人…

数据库设计与前端框架

数据库设计与前端框架 学习目标&#xff1a; 理解多租户的数据库设计方案 熟练使用PowerDesigner构建数据库模型理解前端工程的基本架构和执行流程 完成前端工程企业模块开发 多租户SaaS平台的数据库方案 多租户是什么 多租户技术&#xff08;Multi-TenancyTechnology&a…

Python8-使用json模块解析JSON文件

Python8-使用json模块解析JSON文件 json简介json模块使用 json简介 JSON (JavaScript Object Notation) 是一种用于存储和交换数据的轻量级数据格式。是一种常用的数据格式&#xff0c;用于在不同应用程序之间交换数据。 JSON 文件由键值对组成&#xff0c;键和值之间使用冒号…

C++算法:前缀和、前缀乘积、前缀异或的原理、源码及测试用例

相关 源码测试用例下载 https://download.csdn.net/download/he_zhidan/88430716 包括4个压缩包&#xff0c;初始代码&#xff0c;实现前缀和&#xff0c;实现前缀积&#xff0c;实现前缀异或。都是在前者的基础上修改的。 本博文是CSDN学院课程的讲义 https://edu.csdn.net/c…

15.2 主机探测与路由追踪

Ping 使用 Internet 控制消息协议&#xff08;ICMP&#xff09;来测试主机之间的连接。当用户发送一个 ping 请求时&#xff0c;则对应的发送一个 ICMP Echo 请求消息到目标主机&#xff0c;并等待目标主机回复一个 ICMP Echo 回应消息。如果目标主机接收到请求并且网络连接正常…

【网络协议】聊聊从物理层到MAC层 ARP 交换机

物理层 物理层其实就是电脑、交换器、路由器、光纤等。组成一个局域网的方式可以使用集线器。可以将多台电脑连接起来&#xff0c;然后进行将数据转发给别的端口。 数据链路层 Hub其实就是广播模式&#xff0c;如果A电脑发出一个包&#xff0c;B、C电脑也可以收到。那么数据…

ZKP4.1 SNARKs via Interactive Proofs (Justin Thaler)

ZKP学习笔记 ZK-Learning MOOC课程笔记 Lecture 4: SNARKs via Interactive Proofs (Justin Thaler) 4.1 Interactive Proofs: Motivation and Model Interactive Proofs P solves problem, tells V the answer. Then they have a conversation.P’s goal: convince V the …

1626 无矛盾的最佳球队(排序+动态规划)(灵神笔记)

题目 1626 假设你是球队的经理。对于即将到来的锦标赛&#xff0c;你想组合一支总体得分最高的球队。球队的得分是球队中所有球员的分数 总和 。 然而&#xff0c;球队中的矛盾会限制球员的发挥&#xff0c;所以必须选出一支 没有矛盾 的球队。如果一名年龄较小球员的分数 严…