uniapp H5 实现上拉刷新 以及 下拉加载

uniapp H5 实现上拉刷新 以及 下拉加载

1. 先上图

下拉加载
在这里插入图片描述
在这里插入图片描述

2. 上代码

<script>import DragableList from "@/components/dragable-list/dragable-list.vue";import {FridApi} from '@/api/warn.js'export default {data() {return {tableList: [],loadingHide: false,isRefreshing: false,loadMoreStatus: 'loading', // loading | more | noMorepageSize: 10,pageNum: 1}},components: {DragableList},mounted() {//获取告警列表this.getWarnList()this.loadMoreStatus = 'loading'},methods: {// 下拉刷新refreshList() {this.getWarnList(true)},// 上拉加载loadMore() {console.log('list loadMore');if (this.tableList.length >= this.total){this.loadMoreStatus = 'noMore'return}this.pageNum++this.getWarnList()},//获取告警列表getWarnList(isReload = false) {this.loadingHide = truethis.loadMoreStatus = 'loading'// 请将该方法中的请求 更换为你自己的请求const params = {pageSize: this.pageSize,pageNum: this.pageNum,noiseReductionStatus: '0',alarmIsRecovery: '0',alarmSourceId: uni.getStorageSync('alarmSourceId'),}if (isReload) {this.pageNum = 1this.isRefreshing = truethis.tableList = []}let list = []let baseLen = this.tableList.lengthFridApi.warnList(params).then((result) => {this.loadingHide = trueconst res = resultif (res.code === 0 && res.data) {// 一下代码比较重要const data = res.datalist = data.listconst total = data.totalthis.tableList.push(...list)this.total = totalif (this.tableList.length >= this.total) {this.loadMoreStatus = 'noMore'} else {this.loadMoreStatus = 'more'}this.isRefreshing = false}}).finally(() => {this.loadingHide = false})}}}
</script><template><view class="mp-count-alarmin"><!-- 告警列表 --><dragable-list v-if="!hideShow" :is-refreshing="isRefreshing" :load-more-status="loadMoreStatus"@loadMore="loadMore" @refresh="refreshList"><view class="mp-count-alarmin-top" v-for="item in  tableList">......... 此处请写你自己的样式代码</view></dragable-list></view>
</template>

2. 上组件 dragable-list.vue(复制可直接用)

<script>
import UniLoadMore from "@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue";/*** 区域滚动组件,支持上拉加载和下拉刷新。* 滚动区域高于页面会导致滚动异常,优先级高于页面滚动,不建议用于页面滚动。* */
export default {name: "dragable-list",components: {UniLoadMore},emits: ['refresh', 'loadMore'],props: {/*** 正在刷新,为 true 时重置滚动条* @value {boolean}* */isRefreshing: {type: Boolean,default: false},/*** 加载更多状态* @value {string} more | noMore | loading* */loadMoreStatus: {type: String,default: 'noMore'},/*** 刷新时候返回顶部* @value {boolean} true* */backTopOnRefresh: {type: Boolean,default: true},},data() {return {scrollTop: 0}},watch: {isRefreshing(newVal) {if (newVal === true && this.backTopOnRefresh) {this.scrollTop = 0}}},methods: {handleScroll(e) {const {scrollTop} = e.detailthis.scrollTop = scrollTop},handleRefresh() {if (this.isRefreshing) returnif (this.loadMoreStatus === 'loading') returnthis.$emit('refresh')this.scrollTop = 0},loadMore() {if (this.isRefreshing) returnif (this.loadMoreStatus === 'more') {this.$emit('loadMore')}}},
}
</script><template><scroll-viewclass="dragable-list"scroll-ystyle="height: 100%"refresher-background="transparent":refresher-threshold="100"lower-threshold="0":scroll-top="scrollTop":refresher-triggered="isRefreshing"refresher-enabledenable-back-to-topshow-scrollbar@scroll="handleScroll"@refresherrefresh="handleRefresh"@scrolltolower="loadMore"><slot></slot><uni-load-more v-if="loadMoreStatus!='noMore'" :status="loadMoreStatus" @clickLoadMore="loadMore"></uni-load-more></scroll-view>
</template><style scoped>
.dragable-list {max-height: 100vh;
}
</style>
  1. 组件使用需要引入uni-ui
  2. 在这里插入图片描述
    在这里插入图片描述
  3. 搞定!

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

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

相关文章

为什么MySQL推荐使用自增主键?

为什么MySQL推荐使用自增主键&#xff1f; 主键数据记录本身被存于主索引&#xff08;一棵BTree&#xff09;的叶子节点上&#xff0c;这就要求同一个叶子节点内&#xff08;大小为一个内存页或磁盘页&#xff09;的各条数据记录按主键顺序存放&#xff0c;因此每当有一条新的记…

【JAVA】Semaphore 有什么作用

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;JAVA ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 1. 二进制信号量&#xff1a; 2. 计数信号量&#xff1a; 结语 我的其他博客 前言 Semaphore&#xff08;信号量&#xff09;作为…

uniapp微信小程序-分包

一、为什么要分包 微信小程序每个分包的大小是2M&#xff0c;总体积一共不能超过20M,当然你也可以提升启动速度&#xff0c;降低首次加载时间&#xff0c;模块化开发&#xff0c;按需加载&#xff0c;提高性能。 二、分包步骤 1.首先在 mainfest.json mp-weixin添加以下代码&a…

ORA-01031: insufficient privileges

数据库密码过期了&#xff0c;通过如下命令&#xff1a; sqlplus / as sysdba 还是会报ORA-01031: insufficient privileges错误。 有人说是登录用户名不属于dba组造成的&#xff0c;后来 查看了用户组和用户都隶属于dba组&#xff0c;但是还是提示这个错误。 提示ORA-01…

idea创建golang项目

目录 1、设置环境 2、创建项目 3、设置项目配置 4、初始化项目 5、安装本项目的外部依赖包 6、运行项目 7、访问页面查看结果 1、设置环境 1 启用 Go Modules 功能go env -w GO111MODULEon 2. 阿里云go env -w GOPROXYhttps://mirrors.aliyun.com/goproxy/,direct上述命…

字符串:getline、删除子串.erase()函数、插入子串.insert()函数

getline具体用法&#xff1a; 1、函数形式 getline ( cin,字符串类型&#xff1a;变量名);//默认以换行符结束 getline (cin, 字符串类型&#xff1a;变量名, ‘指定的结束符’); //指定换行结束符 2注意事项&#xff1a; 1&#xff09;如果在使用getline()之前有使用scanf(…

大数据分析案例-基于随机森林算法构建电影票房预测模型

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

Coppeliasim同步模式介绍

同步模式 在倒立摆demo中&#xff0c;打开 synchronous_enable True 后&#xff0c;会发现仿真变慢了&#xff0c;接下来将对同步模式进行介绍。 # simxSynchronous()函数的第一个参数是连接的ID&#xff0c;第二个参数是是否开启同步模式 vrep_sim.simxSynchronous(clien…

怎 么 优 化 H5 让 它 可 以 在 300ms 之 内

减少HTTP请求数量&#xff1a;将多个小的CSS和JavaScript文件合并为一个文件&#xff0c;减少HTTP请求的数量。可以使用工具如Webpack、Parcel等打包工具对代码进行打包合并。 使用缓存&#xff1a;通过设置适当的缓存策略&#xff0c;让浏览器缓存静态资源&#xff08;如CSS、…

Java设计模式【工厂模式】

Java设计模式【工厂模式】 前言 三种工厂模式&#xff1a;简单工厂模式、工厂方法模式、抽象工厂模式&#xff1b; 创建型设计模式封装对象的创建过程&#xff0c;将对象的创建和使用分离开&#xff0c;从而提高代码的可维护性和可扩展性 简单工厂模式 概述&#xff1a;将…

机房建设的陷阱与规范

在数字化时代&#xff0c;数据中心的建设变得愈发重要&#xff0c;然而&#xff0c;许多集成商在机房建设中存在一些常见的误区。他们往往将机房建设仅仅定义为能源设备的安装和装修&#xff0c;而忽略了甲方的网络应用、服务器应用以及网络与服务器之间的连接应用。这导致了一…

前端-Vue項目初始化

大家好我是苏麟 , 今天聊聊前端依赖 Ant Design Vue 快速初始化项目 . Ant Design Vue官网 : 快速上手 - Ant Design Vue (antdv.com) 初始化项目 1.找到文档->快速上手 脚手架命令 : npm install -g vue/cli 2.找到一个文件夹(不要在中文路径) 下打开cmd窗口输入脚手架…

设计一个本地缓存

注意点 数据结构&#xff1a; 设计用什么数据结构存储。最简单的就直接用Map来存储数据&#xff0c;或者复杂想redis一样提供了多种数据类型哈希&#xff0c;列表&#xff0c;集合&#xff0c;有序集合等&#xff0c;底层使用了双端链表&#xff0c;压缩列表&#xff0c;集合&…

威联通docker安装青龙面板

威联通容器界面改版很多&#xff0c;没直接找到新版设置方法&#xff0c;自己摸索了一下做个记录。 一、配置docker镜像源 威联通默认的库地址国内无法直接方法&#xff0c;需要先配置国内镜像源。 在容器工作者中选择“存储库”&#xff0c;点击添加 第一个“提供商”里选…

FPS游戏框架漫谈第五天

今天想了想整理下AnimatorManager 他的职责是负责动画的播放&#xff0c;那么在介绍该对象具备的对外接口&#xff0c;必须先介绍下拥有动画的对象他是怎么管理动画数据的&#xff0c;打个比方如果我们一个把武器需要播放开火动画&#xff0c;那么我们基于unity引擎可视化动画编…

【代码随想录-链表】两两交换链表中的节点

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

dcat admin + dingo + nginx 开发前台

前言 Dcat Admin 是一个功能强大的后端框架&#xff0c;主要用于开发管理后台。然而&#xff0c;大多数网站不仅需要一个管理后台&#xff0c;还需要一个用户界面&#xff0c;即“前台”&#xff0c;以及它们自己的用户系统。 为了实现这一目标&#xff0c;我们需要对 Dcat A…

Leetcode—1828. 统计一个圆中点的数目【中等】

2024每日刷题&#xff08;一零五&#xff09; Leetcode—1828. 统计一个圆中点的数目 实现代码 class Solution { public:vector<int> countPoints(vector<vector<int>>& points, vector<vector<int>>& queries) {vector<int> a…

2023美赛A题之Lotka-Volterra【完整思路+代码】

这是2023年的成功&#xff0c;考虑到曾经付费用户的负责&#xff0c;2024年可以发出来了。去年我辅导队伍数量&#xff1a;15&#xff0c;获奖M为主&#xff0c;个别F&#xff0c;H&#xff0c;零S。言归正传&#xff0c;这里我开始分享去年的方案。由于时间久远&#xff0c;我…

【Java之树】

二叉树 性质 1, 我们把树中结点的第一个子结点作为这个结点左结点 2, 我们把一个结点右兄弟结点, 作为右结点 通过上述操作可以将普通的树转换为二叉树 二叉树中的节点最多有两个子节点&#xff0c;左右子节点有严格划分&#xff0c;次序不能颠倒 特点&#xff1a; 二叉…