微信小程序uni-app+vue3实现局部上下拉刷新和scroll-view动态高度计算

微信小程序uni-app+vue3实现局部上下拉刷新和scroll-view动态高度计算

前言

在uni-app+vue3项目开发中,经常需要实现列表的局部上下拉刷新功能。由于网上相关教程较少且比较零散,本文将详细介绍如何使用scroll-view组件实现这一功能,包括动态高度计算、下拉刷新、上拉加载等完整实现。在这里插入图片描述

重要提示

⚠️ triggered状态管理是关键

  • triggered必须手动管理其true/false状态
  • 不正确的状态管理会导致下拉刷新卡住
  • 需要在适当的时机重置状态

核心实现思路

  1. 状态定义
// 下拉刷新相关状态
const triggered = ref(false)                 // 触发下拉刷新状态
const refresherEnabled = ref(true)           // 是否启用下拉刷新
  1. 关键事件处理
// 下拉过程中触发
const onPulling = () => {triggered.value = true  // 手动设置为true
}// 刷新结束时触发
const onRestore = () => {triggered.value = false  // 手动重置为false
}// 刷新中断时触发
const onAbort = () => {triggered.value = false  // 手动重置为false
}// 刷新数据处理
const refreshHistoryList = async () => {triggered.value = true  // 开始刷新时设置为truetry {// 执行刷新逻辑await loadData()} catch (err) {console.error('刷新失败:', err)} finally {triggered.value = false  // 完成后一定要设置为false}
}
  1. 组件配置
<scroll-view:refresher-enabled="refresherEnabled":refresher-triggered="triggered"@refresherrefresh="refreshHistoryList"@refresherpulling="onPulling"@refresherrestore="onRestore"@refresherabort="onAbort"
><!-- 列表内容 -->
</scroll-view>

注意事项

  1. 状态重置时机

    • 刷新完成时必须重置
    • 刷新中断时必须重置
    • 组件卸载时最好重置

  2. 常见问题

    • 忘记重置导致卡住
    • 重置时机不对导致异常
    • 多个事件重复设置状态

  3. 最佳实践

    • 使用try/finally确保重置
    • 统一状态管理位置
    • 添加适当的错误处理

快速开始

1. 基础配置

2. 组件结构

在template中创建scroll-view组件:

<template><scroll-view :style="{ height: scrollViewHeight }":scroll-y="true":refresher-enabled="refresherEnabled"@refresherrefresh="refreshHistoryList"@refresherpulling="onPulling"@scroll="roll":enable-passive="true":show-scrollbar="false"@refresherrestore="onRestore"@refresherabort="onAbort":refresher-triggered="triggered"ref="scrollView"><!-- 列表内容 --><view class="empty-state" v-show="!list.length">暂无数据</view><view v-for="(item, index) in list" :key="index"><!-- 列表项内容 --></view><up-loadmore v-if="list.length>0" :status="scrollStatus" @loadmore="loadmore"/></scroll-view>
</template>

注意uwiewPlus组件库up-loadmore是通过@loadmore来触发@click的效果的。

3. 核心状态定义

属性/事件类型默认值必填说明
style.heightstring-是设置scroll-view高度,不设置无法滚动
scroll-ybooleanfalse否是否允许纵向滚动
scroll-xbooleanfalse否是否允许横向滚动
refresher-enabledbooleanfalse否是否开启下拉刷新功能
refresher-triggeredbooleanfalse否当前下拉刷新状态
enable-passivebooleanfalse否是否开启被动监听滚动事件
show-scrollbarbooleantrue否是否显示滚动条
@refresherrefreshfunction-否下拉刷新触发时的回调
@refresherpullingfunction-否下拉过程中触发的回调
@refresherrestorefunction-否下拉刷新复位时触发的回调
@refresherabortfunction-否下拉刷新被中止时触发的回调
@scrollfunction-否滚动时触发的回调函数
refstring-否组件的引用标识
// 下拉刷新相关
const triggered = ref(false)                 // 触发下拉刷新状态
const refresherEnabled = ref(true)           // 是否启用下拉刷新
const currentScrollTop = ref(0)              // 当前滚动位置
const scrollViewHeight = ref('400rpx')       // scroll-view高度// 分页相关
const currentPage = ref(1)                   // 当前页码
const pageSize = ref(10)                     // 每页数量
const totalPage = ref(0)                     // 总页数
const scrollStatus = ref<string>('loadmore') // 滚动状态

4. 动态高度计算

onReady(() => {// 获取系统信息const systemInfo = uni.getSystemInfoSync()const windowHeight = systemInfo.windowHeight// 获取各元素高度const query = uni.createSelectorQuery()Promise.all([new Promise<number>(resolve => {query.select('.u-demo-block').boundingClientRect(data => {resolve(data?.height || 0)}).exec()}),// ... 获取其他元素高度]).then(([demoBlockHeight, titleHeight, uploadHeight]) => {// 计算scroll-view高度const scrollHeight = windowHeight - demoBlockHeight - titleHeight - uploadHeight - 40scrollViewHeight.value = `${scrollHeight}rpx`})
})

核心功能实现

1. 下拉刷新

// 下拉刷新处理
const refreshHistoryList = async () => {triggered.value = truecurrentPage.value = 1try {const res = await loadFirstPage()list.value = res.dataupdateLoadStatus()} catch (err) {console.error('刷新失败:', err)} finally {triggered.value = false}
}

2. 上拉加载

// 上拉加载更多
const loadmore = async () => {if (scrollStatus.value === 'noMore') returnscrollStatus.value = 'loading'try {const res = await loadMoreData(++currentPage.value)list.value.push(...res.data)updateLoadStatus()} catch (err) {console.error('加载失败:', err)scrollStatus.value = 'loadmore'}
}

3. 滚动事件处理

const roll = (e: any) => {currentScrollTop.value = e.detail.scrollTop// 控制下拉刷新启用状态refresherEnabled.value = e.detail.scrollTop < 50// 触底加载更多const scrollBottom = e.detail.scrollHeight - e.detail.scrollTop - e.detail.heightif (scrollBottom < 50 && scrollStatus.value === 'loadmore') {loadmore()}
}

注意事项

  1. 高度计算

    • 需要考虑所有固定元素的高度
    • 使用rpx单位确保跨设备兼容性
    • 预留适当边距避免内容被遮挡

  2. 性能优化

    • 使用enable-passive提升滚动性能
    • 合理控制刷新频率
    • 避免频繁触发加载更多

  3. 用户体验

    • 添加加载提示
    • 保持滚动位置
    • 合理控制刷新触发时机

加载更多组件使用

⚠️ up-loadmore组件使用说明

  1. 基础配置
<up-loadmore v-if="list.length>0" :status="scrollStatus" @loadmore="loadmore"loadmore-text="加载更多"
/>
  1. 状态管理
// 加载状态
const scrollStatus = ref<string>('loadmore') // 可选值: loadmore/loading/noMore// 加载更多处理
const loadmore = async () => {if (scrollStatus.value === 'noMore') returnscrollStatus.value = 'loading'  // 设置加载中状态try {const res = await loadMoreData(++currentPage.value)list.value.push(...res.data)// 更新加载状态if (currentPage.value >= totalPage.value) {scrollStatus.value = 'noMore'} else {scrollStatus.value = 'loadmore'}} catch (err) {console.error('加载失败:', err)scrollStatus.value = 'loadmore'}
}
  1. 触发方式
  • 通过@loadmore事件监听触发加载
  • 可以在scroll-view滚动到底部时自动触发
  • 也可以点击"加载更多"文本手动触发
  1. 状态说明
  • loadmore: 可以加载更多
  • loading: 正在加载中
  • noMore: 没有更多数据

完整示例

<scroll-view @scroll="roll":scroll-y="true"
><!-- 列表内容 --><view v-for="(item, index) in list" :key="index">{{ item }}</view><!-- 加载更多组件 --><up-loadmorev-if="list.length>0":status="scrollStatus"@loadmore="loadmore"loadmore-text="加载更多"/>
</scroll-view><script setup lang="ts">
const scrollStatus = ref('loadmore')
const currentPage = ref(1)
const list = ref([])// 滚动触底自动加载
const roll = (e: any) => {const scrollBottom = e.detail.scrollHeight - e.detail.scrollTop - e.detail.heightif (scrollBottom < 50 && scrollStatus.value === 'loadmore') {loadmore()}
}// 加载更多处理
const loadmore = async () => {if (scrollStatus.value === 'noMore') returnscrollStatus.value = 'loading'try {const res = await loadMoreData(currentPage.value++)list.value.push(...res.data)scrollStatus.value = res.hasMore ? 'loadmore' : 'noMore'} catch (err) {console.error('加载失败:', err)scrollStatus.value = 'loadmore'}
}
</script>

总结

通过本教程的学习,我们掌握了:

  1. scroll-view组件的基本使用
  2. 动态高度计算方法
  3. 下拉刷新实现
  4. 上拉加载更多功能
  5. 滚动位置维护

参考资料

  • 微信小程序官方文档
  • Vue3文档
    admore’ : ‘noMore’
    } catch (err) {
    console.error(‘加载失败:’, err)
    scrollStatus.value = ‘loadmore’
    }
    }

## 总结通过本教程的学习,我们掌握了:
1. scroll-view组件的基本使用
2. 动态高度计算方法
3. 下拉刷新实现
4. 上拉加载更多功能
5. 滚动位置维护## 参考资料
- [微信小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html)
- [Vue3文档](https://v3.cn.vuejs.org/)
- [uview-plus文档](https://uiadmin.net/uview-plus/)

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

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

相关文章

SQL——DQL分组聚合

SQL——DQL分组聚合

分组聚合&#xff1a; 格式&#xff1a; select 聚合函数1(聚合的列),聚合函数2(聚合的列) from 表名 group by 标识列; ###若想方便分辨聚合后数据可在聚合函数前加上标识列&#xff08;以标识列进行分组&#xff09; 常见的聚合函数: sum(列名):求和函数 avg(列名)…
阅读更多...
maven打包时出现找不到符号的错误如何解决

maven打包时出现找不到符号的错误如何解决

在maven打包的时候有时会出现找不到符号的情况&#xff0c;具体原因是由于引用的BaseEntity是framework模块下的实体类&#xff0c;所以需要将framework重新clean再install&#xff0c;成功后再将我们的模块打包就成功了
阅读更多...
openGauss开源数据库实战二十一

openGauss开源数据库实战二十一

文章目录 任务二十一 使用JDBC访问openGauss数据库任务目标实施步骤一、准备工作 二、下载并安装JavaSE81 下载JavaSE8安装Java8SE并配置环境变量 三、下载并安装eclipse四、下载并安装openGauss的JDBC驱动包五、使用IDEA编写JDBC测试程序1 使用IDEA的SSH连接虚拟机2 创建项目并…
阅读更多...
Git：常用命令

Git：常用命令

一、查看当前分支 git branch 二、查看所有分支 git branch -a 三、切换到远程分支 git checkout origin/分支名 示例&#xff1a;git checkout origin/dev 四、拉取远程分支代码 git pull origin 分支名 示例&#xff1a;git pull origin dev 五、常用指令 查看暂存区…
阅读更多...
运维实战：K8s 上的 Doris 高可用集群最佳实践

运维实战：K8s 上的 Doris 高可用集群最佳实践

今天我们将深入探讨&#xff1a;&#xff1a;如何在 K8s 集群上部署 Compute storage coupled&#xff08;存算耦合&#xff09; 模式的 Doris 高可用集群&#xff1f; 本文&#xff0c;我将为您提供一份全面的实战指南&#xff0c;逐步引导您完成以下关键任务&#xff1a; 配…
阅读更多...
在GITHUB上传本地文件指南（详细图文版）

在GITHUB上传本地文件指南（详细图文版）

这份笔记简述了如何在GITHUB上上传文件夹的详细策略。 既是对自己未来的一个参考&#xff0c;又希望能给各位读者带来帮助。 详细步骤 打开目标文件夹&#xff08;想要上传的文件夹&#xff09; 右击点击git bash打开 GitHub创立新的仓库后&#xff0c;点击右上方CODE绿色按…
阅读更多...
Vue框架入门

Vue框架入门

Author&#xff1a;Dawn_T17?? 目录 什么是框架 一.Vue 的使用方向 二.Vue 框架的使用场景 &#xff08;TIP&#xff09;MVVM思想 三.Vue入门案例 TIP&#xff1a;插值表达式 四.Vue-指令? &#xff08;1&#xff09;v-bind 和 v-model? ? &#xff08;2&#x…
阅读更多...
FPGA 遍历读 LMK04803 寄存器

FPGA 遍历读 LMK04803 寄存器

主要思路&#xff1a; 1.使用 VIO 输出信号控制什么时候开始读LMK04803寄存器 2.遍历LMK04803所有寄存器&#xff0c;将读到的每个寄存器的值显示在VIO上。 3.遍历指的是 从 R0 开始读&#xff0c;R0读完接着读 R1&#xff0c;一直到R31 结束 4.注意的是写寄存器是 32bit &…
阅读更多...
【uni-app 微信小程序】新版本发布提示用户进行更新

【uni-app 微信小程序】新版本发布提示用户进行更新

知识准备 uni.getUpdateManager文档介绍 不支持APP与H5&#xff0c;所以在使用的时候要做好平台类型的判断&#xff0c;如何判断&#xff0c;参考条件编译处理多端差异 代码参考 export const updateApp () > {const updateManager uni.getUpdateManager()updateManag…
阅读更多...
vue实现点击左右按钮横向滚动

vue实现点击左右按钮横向滚动

html部分 <div ref"tabHeaderRef" class"flex items-center tabs_header"><div class"tab-pre" v-if"hidePre" click"leftPre"><i class"el-icon-arrow-left"></i></div><div r…
阅读更多...
数据结构（3）单链表的模拟实现

数据结构（3）单链表的模拟实现

上一节我们进行了数据结构中的顺序表的模拟式现&#xff0c;今天我们来实现一下另外一个数据结构&#xff1a;单链表。 我们在实现顺序表之后一定会引发一些问题和思考&#xff1a; 1.顺序表在头部和中间插入数据会用到循环&#xff0c;时间复杂O&#xff08;N&#xff09; …
阅读更多...
uni-app 组成和跨端原理 【跨端开发系列】

uni-app 组成和跨端原理 【跨端开发系列】

&#x1f517; uniapp 跨端开发系列文章&#xff1a;&#x1f380;&#x1f380;&#x1f380; uni-app 组成和跨端原理 【跨端开发系列】 uni-app 各端差异注意事项 【跨端开发系列】uni-app 离线本地存储方案 【跨端开发系列】uni-app UI库、框架、组件选型指南 【跨端开…
阅读更多...
操作系统：中断与处理器调度

操作系统：中断与处理器调度

目录 1、中断与中断系统 中断概念&#xff1a; 中断装置&#xff1a; 中断相关概念&#xff1a; 中断优先级别与中断屏蔽 2、处理机&#xff08;CPU&#xff09;调度 调度相关参数&#xff1a;P62 调度算法&#xff1a; 处理机调度时机 处理机调度过程 3、调度级别与多…
阅读更多...
两种距离度量简记

两种距离度量简记

一、Lp距离/Minkowski 距离&#xff08;Minkowski distance&#xff09; 1、Lp距离&#xff1a; 特征空间中两个实例点的距离是两个实例点相似程度的反映。Lp距离是一种一般化的距离度量 设特征空间x是n维实数向量空间Rn xi&#xff0c;xj的Lp距离定义为&#xff08;p>1&…
阅读更多...
从零开始的使用SpringBoot和WebSocket打造实时共享文档应用

从零开始的使用SpringBoot和WebSocket打造实时共享文档应用

在现代应用中&#xff0c;实时协作已经成为了非常重要的功能&#xff0c;尤其是在文档编辑、聊天系统和在线编程等场景中。通过实时共享文档&#xff0c;多个用户可以同时对同一份文档进行编辑&#xff0c;并能看到其他人的编辑内容。这种功能广泛应用于 Google Docs、Notion 等…
阅读更多...
centos7 离线安装7z

centos7 离线安装7z

1、下载7-Zip 下载地址&#xff1a;7-Zip - 程序下载 2、解压 mkdir 7zip --创建文件夹7zip mv 7z2301-linux-x64.tar.xz 7zip/ --移动 cd 7zip tar -xvJf 7z2301-linux-x64.tar.xz --解压 输入ll 查看解压后的文件 3、安装cp 7zzs /usr/local/bin/ 输入7zzs 查看是否安装成功…
阅读更多...
顶会新宠！KAN-LSTM完美融合新方案

顶会新宠！KAN-LSTM完美融合新方案

2024深度学习发论文&模型涨点之——KANLSTM KAN-LSTM混合预测模型是一种结合了自注意力机制&#xff08;KAN, Key-attention network&#xff09;和长短时记忆网络&#xff08;LSTM&#xff09;的深度学习模型&#xff0c;主要用于序列数据的预测任务&#xff0c;如时间序…
阅读更多...
CondaError: Run ‘conda init‘ before ‘conda activate‘

CondaError: Run ‘conda init‘ before ‘conda activate‘

rootautodl-container-543e4aa3a7-e596c47a:~# conda activate python37 CondaError: Run ‘conda init’ before ‘conda activate’ conda 激活虚拟环境的时候报错&#xff0c;提示需要进行初始化&#xff0c;但是初始化之后仍然不生效。 1、初始化 conda init2、重新加载环…
阅读更多...
Java_实例变量和局部变量及this关键字详解

Java_实例变量和局部变量及this关键字详解

最近得看看Java,想学一学Flink实时的东西了&#xff0c;当然Scala语法也有这样的规定&#xff0c;简单看一下这两个吧&#xff0c;都比较容易忽视 实例变量和局部变量 实例变量和局部变量是常见的两种变量类型&#xff0c;区别 作用域&#xff1a; 实例变量&#xff1a;实例变…
阅读更多...
代理模式的理解和实践

代理模式的理解和实践

代理模式&#xff08;Proxy Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许你为其他对象提供一种代理以控制对这个对象的访问。代理对象在客户端和目标对象之间起到中介的作用&#xff0c;客户端通过代理对象间接地访问目标对象。通过这种方式&#xff0c;代理模式…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023