uniapp实现区域滚动、下拉刷新、上滑滚动加载更多

背景:

在uniapp框架中,有两种实现办法。第1种,是首先在page.json中配置页面,然后使用页面的生命周期函数;第2种,使用<scroll-view>组件,然后配置组件的相关参数,包括但不限于:滚动区域、触底加载。。。这里注意要给scroll-view设置一个height不然滚动不了

效果展示:

 

根据开发实际情况,我推荐第2种、第3种解决办法。

一、单个页面的配置

官方链接:点击跳转官网

第一步,是在pages.json配置开启下拉刷新 

{"path": "pages/PMS/document/officialDocument","style": {"navigationStyle": "custom","enablePullDownRefresh": false, //配置后,可以下拉刷新,上拉加载`"onReachBottomDistance": 100}},

就已经成功开启下拉刷新,与触底加载了,当然还需要相对应的事件去触发。接下来就介绍一下所需要的事件函数。

onReachBottom()  (上拉时到底部多少距离触发的事件)    官方语言:页面滚动到底部的事件。可在pages.json里定义具体页面底部的触发距离onReachBottomDistance,比如设为50,那么滚动页面到距离底部50px时,就会触发onReachBottom事件。

uni.startPullDownRefresh() (直接调用一次下拉事件)官方语言:开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。

onPullDownRefresh()   (下拉后触发的事件)官方语言:处理函数(和onLoad等生命周期函数同级),监听该页面用户下拉刷新事件。

 上滑触底加载:

核心代码:

	onLoad() {},onReachBottom(){//上拉到底时触发,onReachBottom函数跟生命周期同级let  allTotal = this.formData.page * this.formData.pageSizeif(allTotal < this.total){this.page ++;//当前条数小于总条数 则增加请求页数this.getData() //调用加载数据方法}else{console.log('已加载全部数据')}},onPullDownRefresh(){//下拉刷新触发,onPullDownRefresh函数跟生命周期同级this.list = []this.getData()//调用获取数据方法setTimeout(() => {//结束下拉刷新uni.stopPullDownRefresh ();}, 1000);},

加载动态效果:

使用组件:
<uni-load-more :status="status"></uni-load-more>
<script>
export default {data(){status: 'more',page:'1',pageSize:'10'},onLoad() {},onReachBottom() {let allTotal = this.page * this.pageSize;if (allTotal < this.total) {this.status = 'loading';  //加载中状态this.page++;this.getData()} else {this.status = 'noMore'; //加载完状态}},}
</script>

 备注说明:

因为通过验证console.log(),按照设计图来写,滚动区域不一样。不会出发onReachBottom()。推荐第2种解决方式。。。

二、scroll-view组件的滚动区域、触底加载

官网链接:点击跳转官网

 

@refresherpulling  //下拉刷新控件被下拉

@refresherrefresh  //下拉刷新被触发

@refresherrestore  //下拉刷新被复位

@scrolltoupper  //滚动到顶部/左边,会触发 scrolltoupper 事件

@scrolltolower  //滚动到底部/右边,会触发 scrolltolower 事件

核心代码:

<template>
<scroll-viewclass="dialogue-box"style="height: 86vh":scroll-y="true":refresher-threshold="10":scroll-top="scrollTop"@scrolltolower="handelLower":refresher-enabled="isLoadingTop":refresher-triggered="isTriggeredTop"@refresherrefresh="handleRefresher"@refresherrestore="handelonRestore">
</scroll-view>
</template><script>
export default {
data() {return {tableList: [],lazyLoad: true,shipGuid: "",scrollTop: "50px",loadings: "more", //more/loading/noMoreisLoadingTop: true,isTriggeredTop: true,isShowBtm: false,
};
},
method:{getTableList(info, load) {//发起网络请求getFiles(info).then((res) => {if (res.data.code == 0) {const resData = res.data.data;if (load) {this.tableList = this.tableList.concat(resData);if (resData && resData.length == 0) {// console.log("没有更多了");uni.hideLoading();this.loadings = "noMore";} else {uni.hideLoading();this.loadings = "more";}return resData;} else {this.tableList = resData;this.noNum = !this.tableList.length;}}});},handelLower() {console.log("滚动到底部>>>");this.isShowBtm = true;if (this.loadings == "loading") return;if (!this.loadings == "noMore") return;this.loadings = "loading";this.pages.page += 1;let info = {...this.pages,shipGuid: this.shipGuid,};this.getTableList(info, true);},handleRefresher() {console.log("顶部下拉刷新s>>>", this.isLoadingTop, this.isTriggeredTop);this.isLoadingTop = true;this.isTriggeredTop = true;if (!this.isLoadingTop) return;let info = {...this.pages,shipGuid: "",};this.$store.commit("setShipGuids", "");this.getTableList(info);this.isLoadingTop = false;this.isTriggeredTop = false;},handelonRestore() {console.log("handelonRestore>>>");this.isLoadingTop = true;},
},
</script>

备注:

scroll-view组件要设置一个height。一般是设置为(某某vh) 

三、第2种的优化

背景:

第2种已经能够实现下拉刷新和触底加载。但是我们只想要触底加载,并且想让scroll-view组件的高度是自适应的,不再设置 滚动区域的高度scrollHeight

注意:关于高度,通过设置css样式解决,通过给最外层的盒子,设置min-height:0;

 这次使用uniapp+uView组件实现:

效果展示:

代码:

<template><view class="regionalregulation_contanier"><!-- <TopNavibarVue :listData="listData" :currentTabIndex="currentTabIndex" @clickTabs="clickTabs"></TopNavibarVue> --><template v-for="item in listData"><view class="regionalregulation_content" v-if="currentTabIndex == item.id" :key="item.id"><!-- <u-sticky bgColor="#fff"><view style="padding: 20rpx 20rpx 0rpx 20rpx;"><FormItem :formItems="formItems" @searchData="searchData"></FormItem></view></u-sticky> --><view class="content_list" v-if="tableData.length"><scroll-view :scroll-y="true" @scrolltolower="handelLower"><view v-for="i in tableData" :key="i.pid"><CardTopBTNVue :data="i" :detail="{ title: item.subName }"></CardTopBTNVue></view><u-loadmore :status="loadings" v-if="isShowBtm" /></scroll-view></view><view class="content_list" v-else><u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无匹配信息"></u-empty></view></view></template></view>
</template>
<script>
export default {
data() {return {pages: {pageNum: 1,pageSize: 7,},tableData: [],scrollTop: "50px",loadings: "loadmore", //loadmore/loading/nomoreisShowBtm: false,
}
methods: {async getTableList(params, id, _isLower) {const {data: res} = await this.listData[id].apiPost(params)if (res.code == 0) {const resData = res.dataif (_isLower) {this.tableData = [...this.tableData, ...resData]} else {this.tableData = resData}this.loadings = resData.length < params.pageSize ? "nomore" : "loadmore";} else {this.tableData = []}// this.isShowBtm = false;setTimeout(function () {uni.hideLoading();}, 500);},handelLower() {this.isShowBtm = true;if (this.loadings == "loading") return;if (this.loadings == "nomore") return;this.loadings = "loading";this.pages.pageNum += 1;this.getTableList(this.pages, this.currentTabIndex, true);},
}
</script><style lang="scss" scoped>
.regionalregulation_contanier {width: 100%;height: 100%;display: flex;flex-direction: column;.regionalregulation_content {min-height: 0;flex: 1;display: flex;flex-direction: column;box-sizing: border-box;.content_list {min-height: 0;flex: 1;overflow-y: auto;padding: 0rpx 20rpx;margin-top: 10rpx;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;align-content: center;box-sizing: border-box;uni-scroll-view {height: 100%;}}}
}
</style>

CSS布局中最小高度的妙用——最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸 

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

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

相关文章

Spring(一篇就懂)

Spring框架简介 Spring 是一个开源的Java企业级应用开发框架。 特点&#xff1a; 控制反转&#xff08;IoC&#xff09;&#xff1a;通过依赖注入&#xff08;DI&#xff09;减少组件间的耦合&#xff0c;由Spring容器负责对象的创建和绑定。 面向切面编程&#xff08;AOP&am…

企业高性能web服务器(nginx)

目录 Web服务器基础介绍 正常情况下的单次web服务器访问流程 Apache 经典的 Web服务端 Apache prefork 模型 Apache work模型 Apache event模型 服务端的I/O流程 服务器的I/O 磁盘I/O 网络I/O 网络I/O处理过程 I/O模型 I/O模型相关概念 同步/异步 阻塞/非阻塞 网…

面向对象06:super关键字详解

本节内容视频链接&#xff1a;面向对象10&#xff1a;Super详解_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV12J41137hu?p69&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5 Java中的‌super关键字是一个特殊的引用&#xff0c;‌用于指代父类对象‌。‌在子…

鸿蒙HarmonyOS实战:IPC与RPC设备内进程通信

基本 IPC&#xff08;Inter-Process Communication&#xff09;与RPC&#xff08;Remote Procedure Call&#xff09;用于实现跨进程通信&#xff0c;不同的是前者使用Binder驱动&#xff0c;用于设备内的跨进程通信&#xff0c;后者使用软总线驱动&#xff0c;用于跨设备跨进…

学习yolo+Java+opencv简单案例(三)

主要内容&#xff1a;车牌检测识别&#xff08;什么颜色的车牌&#xff0c;车牌号&#xff09; 模型作用&#xff1a;车牌检测&#xff0c;车牌识别 文章的最后附上我的源码地址。 学习还可以参考我前两篇博客&#xff1a; 学习yoloJavaopencv简单案例&#xff08;一&#xff0…

Datawhale X 李宏毅苹果书 AI夏令营-深度学习入门班-task2

一开始假设的模型是ybw1&#xff0c;但在可视化预测值和真实值后&#xff0c;发现数据具有规律性&#xff0c;因此换成7天 额&#xff0c;不知道为什么要在这里这样引入sigmoid函数&#xff0c;有点怪怪的&#xff0c;但确实用无限多的分段函数就能拟合很多曲线 所以这里的意…

5步实现猫眼电影爬虫与k-means算法可视化分析

&#x1f34a;作者&#xff1a;计算机毕设匠心工作室 &#x1f34a;简介&#xff1a;毕业后就一直专业从事计算机软件程序开发&#xff0c;至今也有8年工作经验。擅长Java、Python、微信小程序、安卓、大数据、PHP、.NET|C#、Golang等。 擅长&#xff1a;按照需求定制化开发项目…

框架——特殊符号处理,模糊查询

1.特殊符号处理 在 mybatis 中的 xml 文件中&#xff0c;存在一些特殊的符号&#xff0c;比如&#xff1a;<、>、"、&、<>等&#xff0c;正常书写mybatis 会报错&#xff0c;需要对这些符号进行转义。具体转义如下所示&#xff1a; 特殊字符 转义字符 &…

【GNSS射频前端】MA2769初识

MAX2769 芯片概述&#xff1a; MAX2769是一款单芯片多系统GNSS接收器&#xff0c;采用Maxim的低功耗SiGe BiCMOS工艺技术。集成了包括双输入低噪声放大器&#xff08;LNA&#xff09;、混频器、图像拒绝滤波器、可编程增益放大器&#xff08;PGA&#xff09;、压控振荡器&#…

微信小游戏授权问题

微信小程序获取用户相关信息的接口&#xff0c;如wx.getUserCloudStorage&#xff0c;报错&#xff1a;please go to mp to announce your privacy usage。 需要在微信公众平台设置用户隐私保护。

(论文解读)Domain Adaptation via Prompt Learning

摘要 无监督域适应( UDA )旨在将从带有标签的源域数据中学习到的模型适应到未标注的目标域数据集。现有的UDA方法通过对齐源域和目标域特征空间来学习领域不变特征。这种对齐是通过约束实现的&#xff0c;例如统计差异最小化或对抗学习。 然而&#xff0c;这些约束会导致语义…

AudioNotes -将音频内容转 markdown

文章目录 一、关于 AudioNotes效果展示音视频识别和整理与音视频内容对话 二、使用方法1、安装 Ollama2、拉取模型3、部署服务3.1 Docker部署&#xff08;推荐&#xff09;&#x1f433;3.2 本地部署 &#x1f4e6; 一、关于 AudioNotes AudioNotes 能够快速提取音视频的内容&…

【C# 】使用List<实体类>

1. 使用List<实体类> 要在C#中使用List<EntityTemp>并实现查找数据输出&#xff0c;首先需要定义EntityTemp类&#xff0c;并创建一个List<EntityTemp>类型的列表。然后&#xff0c;你可以使用LINQ或其他方法来查找和输出数据。 假设EntityTemp类具有一个…

Kafka快速入门:Kafka驱动JavaApi的使用

生产者和消费者是Kafka的核心概念之一&#xff0c;它们在客户端被创建和使用&#xff0c;并且包含了许多与Kafka性能和机制相关的配置。虽然Kafka提供的命令行工具能够执行许多基本操作&#xff0c;但它无法实现所有可能的性能优化。相比之下&#xff0c;使用Java API可以充分利…

zigbee笔记、十五、组播通信原理

一、zigbee四种通讯 1、单播&#xff08;略&#xff09; 2、广播&#xff08;略&#xff09; 3、组播&#xff1a;在zigbee网络中&#xff0c;模块可以用分组来标记&#xff0c;发送的模块如果发送的组号和网络里面标记接收模块的组号相对应&#xff0c;那么这些模块就可以拿到…

C#/.NET/.NET Core技术前沿周刊 | 第 1 期(2024年8.12-8.18)

前言 C#/.NET/.NET Core技术前沿周刊&#xff0c;你的每周技术指南针&#xff01;记录、追踪C#/.NET/.NET Core领域、生态的每周最新、最实用的技术文章、社区动态、优质项目和学习资源等。让你时刻站在技术前沿&#xff0c;助力技术成长与视野拓宽。 欢迎投稿&#xff0c;推荐…

innodb_buffer_pool_size在线缩小操作

一、背景 测试数据库内存32G&#xff0c;只有MySQL数据库&#xff0c;但是innodb_buffer_pool_size设置了24G&#xff0c;导致经常出现lack of memory问题、lack of swap问题。 因为使用了MySQL5.7.36版本&#xff0c;利用innodb_buffer_pool_size参数值可在线调整的新特性&…

C++函数调用栈从何而来

竹杖芒鞋轻胜马,谁怕?一蓑烟雨任平生~ 个人主页&#xff1a; rainInSunny | 个人专栏&#xff1a; C那些事儿、 Qt那些事儿 文章目录 写在前面原理综述x86架构函数调用栈分析如何获取rbp寄存器的值总结 写在前面 程序员对函数调用栈是再熟悉不过了&#xff0c;无论是使用IDE…

基于cubemx的STM32的freertos的串口通信

1、任务描述 使用freertos系统实现电脑调试助手和正点原子开发板STM32F103ZET6的串口通信。 2、cubemx设置 3、程序代码 &#xff08;1&#xff09;添加usart1.c #include "usart1.h"#include "usart.h"/**********重定义函数**********/struct __FILE …

阵列信号处理2_阵列信号最优处理常用准则(CSDN_20240825)

目录 最小均方误差&#xff08;Minimum Square Error&#xff0c;MSE&#xff09;准则 最大信噪比&#xff08;Maximum Signal Noise Ratio&#xff0c;MSNR&#xff09;准则 极大似然&#xff08;Maximum Likehood, ML&#xff09;准则 最小方差无损响应&#xff08;Minim…