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.hqwc.cn/news/438947.html

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

相关文章

Docker私有仓库搭建

目录 搭建本地私有仓库 Docker--harbor私有仓库部署与管理 Harbor 简介 什么是Harbor Harbor的特性 Harbor的构成 Harbor 部署 部署 Docker-Compose 服务 ​编辑部署 Harbor 服务 启动 Harbor 进入浏览器http://192.168.20.10进入harbor的客户端 搭建本地私有仓库 …

大数据学习之Redis、从零基础到入门(三)

目录 三、redis10大数据类型 1.哪十个&#xff1f; 1.1 redis字符串&#xff08;String&#xff09; 1.2 redis列表&#xff08;List&#xff09; 1.3 redis哈希表&#xff08;Hash&#xff09; 1.4 redis集合&#xff08;Set&#xff09; 1.5 redis有序集合&#xff08…

(十四)测频NE555应用

文章目录 NE555简介NE555原理图如何对NET_SIG&#xff08;P34&#xff09;引脚计脉冲测频应用部分代码现象 NE555简介 NE555是一种集成电路&#xff0c;其内部结构包括比较器、RS触发器、电压比较器和输出级三个主要功能模块。是由硬件直接产生的脉冲 NE555一些的常见应用&am…

Windows11搭建GPU版本PyTorch环境详细过程

Anaconda安装 https://www.anaconda.com/ Anaconda: 中文大蟒蛇&#xff0c;是一个开源的Python发行版本&#xff0c;其包含了conda、Python等180多个科学包及其依赖项。从官网下载Setup&#xff1a;点击安装&#xff0c;之后勾选上可以方便在普通命令行cmd和PowerShell中使用…

当代码遇上玄学……

为什么bug天天出现? 为什么bug遥遥领先? 一杯茶&#xff0c;一包烟&#xff0c;一个bug找一天。 问&#xff1a;程序出现BUG的时候&#xff0c;程序员能做什么&#xff1f; 答&#xff1a;烧香拜佛看运势。 有人相爱&#xff0c;有人在夜里看海&#xff0c;有人在凌晨三点…

光环云与跨境智算云网实验室联合发布“数据全链路安全与合规解决方案”

1月19日&#xff0c;国际数据经济产业创新大会在上海临港新片区召开&#xff0c;光环云受邀出席。会上&#xff0c;光环云与“上海国际数据港创新实验室——跨境智算云网实验室”联合发布“数据全链路安全与合规解决方案”&#xff0c;助力企业数据跨境流动更加便捷、安全、高效…

代码随想录算法训练营DAY6 | 哈希表(1)

DAY5休息一天&#xff0c;今天重启~ 哈希表理论基础&#xff1a;代码随想录 Java hash实现 &#xff1a;java 哈希表-CSDN博客 一、LeetCode 242 有效的字母异位词 题目链接&#xff1a;242.有效的字母异位词 思路&#xff1a;设置字典 class Solution {public boolean isAnag…

openGauss学习笔记-210 openGauss 数据库运维-常见故障定位案例-谓词下推引起的查询报错

文章目录 openGauss学习笔记-210 openGauss 数据库运维-常见故障定位案例-谓词下推引起的查询报错210.1 谓词下推引起的查询报错210.1.1 问题现象210.1.2 原因分析210.1.3 处理办法 openGauss学习笔记-210 openGauss 数据库运维-常见故障定位案例-谓词下推引起的查询报错 210.…

用javadoc生成API文档

本篇介绍怎么用javadoc生成API帮助文档 安装javadoc插件&#xff0c;然后重启ide 点这里 加上 -encoding UTF-8 生成的文档 这样注释到位了API文档就到位了

【行业应用-智慧零售】东胜物联餐饮门店智能叫号解决方案,为企业智能化升级管理服务

随着科技的不断进步&#xff0c;物联网设备已经广泛应用于各行各业&#xff0c;包括餐饮业。在餐饮门店的线下运营过程中&#xff0c;叫号系统是一项重要的设备需求。传统的叫号方式往往会消耗大量的人力和时间&#xff0c;而物联网技术为餐饮行业提供了一种更高效、智能化的解…

微博怎么把客户引流到私域?(引流技巧)

微博 1&#xff09;背景banner图 在微博主页顶部的背景图里&#xff0c;可以引导添加个人微信、公众号等信息&#xff0c;通常配合福利引导用户添加。 2&#xff09;个人简介 微博中比较常见的引流方式&#xff0c;可以直接在简介区内留下微信号、公众号名称、邮箱等信息&#…

shell - 正则表达式和grep命令和sed命令

一.正则表达式概述 1.正则表达式定义 1.1 定义 使用字符串描述、匹配一系列符合某个规则的字符串 1.2 了解 普通字符&#xff1a; 大小写字母、数字、标点符号及一些其它符号元字符&#xff1a; 在正则表达式中具有特殊意义的专用字符 1.3 层次分类 基础正则表达式扩展正…