uni-app 下拉刷新、 上拉触底(列表信息)、 上滑加载(短视频) 一键搞定

一、下拉刷新

1. 首先找到pages.json中

给需要进行下拉刷新的页面设置可以下拉刷新

2. 然后在需要实现下拉刷新的script标签内添加

导入onPullDownRefresh

import {onPullDownRefresh} from '@dcloudio/uni-app'

 下拉刷新触发的事件

onPullDownRefresh(()=> {console.log('正在刷新中......');setTimeout(function () {uni.stopPullDownRefresh();}, 1000);
})

二、上拉触底

1.在需要实现上拉触底的script标签内添加

import {onPullDownRefresh} from '@dcloudio/uni-app'
onReachBottom(()=>{console.log('触底啦!')
})	

三、上滑加载

一般用于短视频,向上滑动触发时间,跳转到下一个视频

1. 在需要实现上滑加载的组件上加上参数touchstart、touchmove、touchend:

<view class="layout"  @touchstart="touchStart"@touchmove="touchMove"@touchend="touchEnd">//短视频
</view>

2.  在需要实现上滑加载的script标签内添加

// 定义变量
const isLoading = ref(false); // 标记是否正在加载
const startY = ref(0); // 记录触摸开始的Y坐标
const distanceThreshold = 60; // 设置触发加载的距离阈值// 模拟加载数据的函数
const loadData = () => {if (isLoading.value) return; // 如果正在加载,则不重复触发isLoading.value = true;console.log('加载更多数据...');// 模拟加载过程setTimeout(() => {isLoading.value = false;// 这里可以添加实际加载数据的逻辑,比如调用API获取数据}, 1000);
};// 触摸开始事件
const touchStart = (event) => {startY.value = event.touches[0].clientY;
};// 触摸移动事件
const touchMove = (event) => {const moveY = event.touches[0].clientY;const distance = startY.value - moveY; // 计算滑动的距离// 如果向上滑动并且超过阈值,则触发加载if (distance > distanceThreshold) {loadData();}
};// 触摸结束事件
const touchEnd = () => {startY.value = 0; // 重置开始Y坐标
};

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

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

相关文章

Java 中 HashMap集合使用

目录 一. HashMap概述 二. HashMap特点 三. HashMap构造方法 四. HashMap的常用方法 五. 使用注意事项 六. 代码示例 一. HashMap概述 HashMap 是 Java 中的一个非常重要的类&#xff0c;它实现了 Map 接口&#xff0c;用于存储键值对&#xff08;key-value pairs&#…

【架构艺术】服务架构稳定性的基础保障

一个产品随着不断研发&#xff0c;其服务架构的复杂度会越来越高。随着产品的用户体量变大&#xff0c;为了保证产品能够长线运营&#xff0c;就需要保证整个服务架构的稳定性。因此&#xff0c;今天这篇文章&#xff0c;就从实操的角度&#xff0c;粗浅讨论一下&#xff0c;服…

QML旋转选择器组件Tumbler

1. 介绍 Tumbler是一个用于创建旋转选择器的组件。它提供了一种直观的方式来让用户从一组选项中进行选择&#xff0c;类似于转盘式数字密码锁。网上找的类似网图如下&#xff1a; 在QML里&#xff0c;这种组件一共有两个版本&#xff0c;分别在QtQuick.Extras 1.4(旧)和QtQuic…

【Python】-蚂蚁森林问答题-查看当天的答案

http://www.xuexili.com/mayizhuangyuan/jinridaan.htmlimport requests from lxml import etree import time import re url ‘https://www.app178.com/dujia/248082.html’ resp requests.get(url) resp.encoding ‘utf-8’ html etree.HTML(resp.text.encode(‘gbk’).…

20.网工入门篇--------介绍下IPV6基础知识

地址表示形式&#xff1a; 完整格式&#xff1a;IPv6 地址总长度为 128 位&#xff0c;通常分为 8 组&#xff0c;每组为 4 个十六进制数的形式&#xff0c;每组十六进制数间用冒号分隔。例如&#xff1a;2001:0db8:85a3:0000:0000:8a2e:0370:7334。压缩格式&#xff1a;为了书…

车载无人机用来做什么?车载无人机技术详解

车载无人机是将车和无人机组合到一起的产品&#xff0c;它有效地结合了无人机的灵活性和指挥车的远距离移动性&#xff0c;大大扩展了无人机的使用范围。以下是对车载无人机技术的详细解析&#xff1a; 一、车载无人机的应用 1. 应急现场指挥&#xff1a; 车载无人机可迅速抵…

【ChatGPT】让ChatGPT根据固定模板生成报告或文档

让ChatGPT根据固定模板生成报告或文档 在撰写报告或文档时&#xff0c;使用固定模板可以确保内容的统一性和结构的清晰性。利用ChatGPT生成符合特定模板的报告&#xff0c;不仅提高了工作效率&#xff0c;还能确保信息的准确传达。本文将探讨如何设计固定模板并引导ChatGPT生成…

HarmonyOS NEXT 应用开发实战(九、知乎日报项目详情页实现详细介绍)

在本篇博文中&#xff0c;我们将探讨如何使用 HarmonyOS Next 框架开发一个知乎日报的详情页&#xff0c;逐步介绍所用到的组件及代码实现。知乎日报是个小巧完整的小项目&#xff0c;这是一个循序渐进的过程&#xff0c;适合初学者和有一定开发经验的工程师参考。 1. 项目背景…

C++线程异步

std::future std::future作为异步结果的传输通道&#xff0c;可以很方便地获取线程函数的返回值。 std::future_status Ready (std::future_status::ready): 当与 std::future 对象关联的异步操作已经完成时&#xff0c;std::future 处于 ready 状态。在这个状态下&#xff0c;…

阿里云k8s-master部署CNI网络插件遇到的问题

问题 按照网络上的部署方法 cd /opt/k8s # 下载 calico-kube-controllers配置文件&#xff0c;可能会网络超时 curl https://docs.projectcalico.org/manifests/calico.yaml -O kubectl apply -f calico.yaml 试了很多次都不行&#xff0c;k8s-master都是Not ready的状态 ca…

从壹开始解读Yolov11【源码研读系列】——Data.Base.py.BaseDataset:可灵活改写的数据集加载处理基类

目录 一、base.BaseDataset 1.__init__类初始化 2.get_img_files根据地址获得图片详细地址 3.get_labels&#xff08;自定义&#xff09;获取标签数据 4. update_labels指定类别和单分类设定 5.set_rectangle开启批量矩阵训练 6.cache_images加载图片进程可视化 7.load_image内…

从0学习React(10)

示例代码&#xff1a; const columns: ProColumns<API.BasicInfoItem>[] [{title: 设备编码,dataIndex: deviceCode,ellipsis: true,width: 40,},{title: 设备名称,dataIndex: deviceName,ellipsis: true,width: 50,},{title: 产线-工序,dataIndex: deviceClassifyName…

js操作数组的方法 / js操作字符串的方法

操纵数组的方法 常见的有10种 push() -在数组末尾添加一个或多个元素&#xff0c;并返回新的长度。 pop() -删除数组的最后一个元素&#xff0c;并返回那个元素。 shift() -删除数组的第一个元素&#xff0c;并返回那个元素。 unshift() -在数组的开始添加一个或多个元素&…

计算机毕业设计Hadoop+大模型地震预测系统 地震数据分析可视化 地震爬虫 大数据毕业设计 Spark 机器学习 深度学习 Flink 大数据

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

Redis到底支不支持事务?半事务

redis是支持事务的&#xff0c;它与传统的关系数据库中的事务有所不同。 1.原子性&#xff1a; redis事务保证的是队列中的命令作为一个整体要么全部执行&#xff0c;要么全部不执行。但是&#xff0c;如果事务中的某个命令因为执行错误而失败&#xff0c;redis会继续执行事务…

数据结构和算法(六):贪心算法、分治算法、回溯算法、动态规划、拓扑排序

从广义上来讲&#xff1a;数据结构就是一组数据的存储结构 &#xff0c; 算法就是操作数据的方法 数据结构是为算法服务的&#xff0c;算法是要作用在特定的数据结构上的。 10个最常用的数据结构&#xff1a;数组、链表、栈、队列、散列表、二叉树、堆、跳表、图、Trie树 10个最…

浅谈二进制位移

一、基本形式 二进制位移操作是计算机编程中常用的一种位操作&#xff0c;它可以用来实现乘除操作、数据压缩和扩展等。位移操作包括左移和右移两种基本形式&#xff1a; 1、左移&#xff08;Left Shift&#xff09;&#xff1a; 符号&#xff1a;<<功能&#xff1a;将…

顺序表和链表(一)

目录 线性表 一、顺序表 <1>顺序表 &#xff08;1&#xff09;静态顺序表 &#xff08;2&#xff09;动态顺序表-按需申请 <2>链表 &#xff08;1&#xff09;单链表 &#xff08;2&#xff09;双链表 主程序&#xff08;test.c&#xff09; 头文件&#…

pgsql数据量大之后可能遇到的问题

当 PostgreSQL 数据量增大时&#xff0c;可能会遇到以下问题&#xff1a; 查询性能下降&#xff1a;随着数据量的增加&#xff0c;查询可能会变得缓慢&#xff0c;尤其是在没有适当索引的情况下。大量的数据意味着更多的行需要被扫描和过滤&#xff0c;这会显著增加查询执行时间…

样本不均衡与异常点检测处理|SMOTE|LOF|IForest

在机器学习中&#xff0c;数据样本不均衡和异常值检测是数据科学家和机器学习工程师经常面临的挑战。这些问题如果不加以处理&#xff0c;会严重影响模型的性能和准确性。本文将概述这些问题&#xff0c;并提出相应的解决方案。 样本不均衡概述 在分类任务中&#xff0c;样本…