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

news2024/11/25 20:37:06

一、下拉刷新

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.coloradmin.cn/o/2232290.html

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

相关文章

AprilTag在相机标定中的应用简介

1. AprilTag简介 相机标定用的标靶类型多样,常见的形式有棋盘格标靶和圆形标靶。今天要介绍的AprilTag比较特别,它是一种编码形式的标靶。其官网为AprilTag,它是一套视觉基准系统,包含标靶编解码方法(Tag生成)和检测算法(Tag检测),可用于AR、机器人、相机标定等领域。…

stm32入门教程--USART外设 超详细!!!

目录 简介 什么是UART&#xff1f; 什么是USART&#xff1f; 简介 USART&#xff08;Universal Synchron /Asynchronous Receiver /Transmitter&#xff09;通用同步/异步收发器 1、USART是STM32内部集成的硬件外设&#xff0c;可根据数据寄存器的一个字节数据自动生成数据帧…

ubuntu20.04 加固方案-设置重复登录失败后锁定时间限制

一、编辑PAM配置文件 打开终端。 使用文本编辑器&#xff08;如vim&#xff09;编辑/etc/pam.d/common-auth文件。 sudo vim /etc/pam.d/common-auth 二、添加配置参数 在打开的配置文件中&#xff0c;添加或修改以下参数&#xff1a; auth required pam_tally2.so deny5 un…

Linux操作系统指令(部分)

Linux操作系统 要求如下&#xff1a; 1、查看/etc/passwd文件的第18-20行内容&#xff0c;并将找到的内容存储至/home/passwd文件中 2、查找/etc/passwd文件中包含root字符的行并将找到的行存储至/root/passwd文件中 3、将/home目录复制到/root目录 4、将/root/home目录&a…

钉子户绷不住了,Win 10正式改为「付费续命」模式

众所周知&#xff0c;「终止支持」是所有 Windows 版本早已既定又让人非常操蛋的最终归宿。 当微软认为一代操作系统已完成其生命周期使命的那一刻&#xff0c;便会毫不犹豫地宣告它的死期。 Windows 系统一旦结束支持&#xff0c;微软将不会再提供任何技术维护和安全更新。 …

C++ | Leetcode C++题解之第528题按权重随机选择

题目&#xff1a; 题解&#xff1a; class Solution { private:mt19937 gen;uniform_int_distribution<int> dis;vector<int> pre;public:Solution(vector<int>& w): gen(random_device{}()), dis(1, accumulate(w.begin(), w.end(), 0)) {partial_sum(…

Grafana+Prometheus监控篇-Nginx

一、监控exporter安装 ①、下载地址 nginx-exporter 这里是Windows下监控&#xff0c;选择amd64. ②、nginx-exporter配置 打开nginx的配置文件nginx.conf,启用nginx的基本状态. server {listen 8088;location /status {stub_status;allow 127.0.0.1; deny all;}} ③…

git 入门作业

任务1: 破冰活动&#xff1a;自我介绍任务2: 实践项目&#xff1a;构建个人项目 git使用流程&#xff1a; 1.将本项目直接fork到自己的账号下&#xff0c;这样就可以直接在自己的账号下进行修改和提交。 这里插一条我遇到的问题&#xff0c;在fork的时候没有将那个only camp4的…

RGA DEMO 下部

#加载llm模型通过ollama最好别用ollama我是没经济条件 from langchain_community.llms import Ollama llm Ollama(model"qwen1_5-4b-chat-q2_k")#pip install langchain_ollama -i https://pypi.tuna.tsinghua.edu.cn/simple #OllamaEmbeddings 要写地址本地也要写&…

Linux 常用安装软件

1、安装JDK 1.1、查看系统自带JDK yum search java|grep jdk 1.2、安装JDK yum install java-1.8.0-openjdk 输入Y 1.3、编辑环境变量配置 vim /etc/profile 添加一下配置 export JAVA_HOME/usr/lib/jvm/java-1.8.0-openjdk export PATH$JAVA_HOME/bin:$PATH export CLAS…

电子电气架构 --- 车载诊断的快速入门

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 所有人的看法和评价都是暂时的&#xff0c;只有自己的经历是伴随一生的&#xff0c;几乎所有的担忧和畏惧…

老板电器芯邦CBM7332触摸式净化水槽硬件和程序

老板电器净化水槽是一款集水槽与食材净化功能于一体的创新产品&#xff0c;旨在为你提供更健康、便捷的厨房体验。 老板电器净化水槽具有以下好处和优点&#xff1a; 一、健康保障 1. 高效净化&#xff1a;能够有效去除食材中的农药残留、细菌、激素等有害物质&#xff0c;为…

Python脚本批量给文件添加前缀(超简单,超实用)

文章目录 讲个故事说个问题写个方案一、安装Python脚本环境二、新建文件夹和文件三、编写源代码四、详细操作视频五、总结 讲个故事 有一天&#xff0c;我的老板丢给了我一个压缩包&#xff0c;轻描淡写的来了句&#xff0c;把包里的文件名字开头统统加上公司名字&#xff0c;…

深度学习之经典网络-AlexNet详解

AlexNet 是一种经典的卷积神经网络&#xff08;CNN&#xff09;架构&#xff0c;在 2012 年的 ImageNet 大规模视觉识别挑战赛&#xff08;ILSVRC&#xff09;中表现优异&#xff0c;将 CNN 引入深度学习的新时代。AlexNet 的设计在多方面改进了卷积神经网络的架构&#xff0c;…

Android亮屏Job的功耗优化方案

摘要: Job运行时会带来持锁的现象,目前灭屏放电Job的锁托管已经有doze和绿盟标准监管,但是亮屏时仍旧存在过长的持锁现象,故为了优化功耗和不影响用户体验下,新增亮屏放电下如果满足冻结和已运行过一次Job,则进行job限制,当非冻结时恢复的策略 1.现象: (gms_schedu…

Linux版更新流程

一.下载更新包 下载地址&#xff1a;https://www.nvisual.com/%e4%b8%8b%e8%bd%bd/ 二.更新包组成 更新包由三部分组成&#xff1a; 前端更新包&#xff1a;压缩的ZIP文件&#xff0c;例如&#xff1a;dist-2.2.26-20231227.zip (2.2.26是版本号 20231227是发布日期)后端更…

Java环境下配置环境(jar包)并连接mysql数据库

目录 jar包下载 配置 简单连接数据库 一、注册驱动&#xff08;jdk6以后会自动注册&#xff09; 二、连接对应的数据库 以前学习数据库就只是操作数据库&#xff0c;根本不知道该怎么和软件交互&#xff0c;将存储的数据读到软件中去&#xff0c;最近学习了Java连接数据库…

鸿蒙网络编程系列42-仓颉版域名解析示例

1. 域名解析简介 域名解析是网络开发中经常使用的功能之一&#xff0c;特别是对于当前版本的鸿蒙API&#xff0c;使用TCP或者UDP等网络协议通讯时&#xff0c;只能使用确定的IP地址进行绑定或者发送消息&#xff0c;还不支持直接使用域名&#xff0c;所以&#xff0c;通过域名…

第15课 算法(下)

掌握冒泡排序、选择排序、插入排序、顺序查找、对分查找的的基本原理&#xff0c;并能使用这些算法编写简单的Python程序。 一、冒泡排序 1、冒泡排序的概念 冒泡排序是最简单的排序算法&#xff0c;是在一列数据中把较大&#xff08;或较小&#xff09;的数据逐次向右推移的…

Netty 强大的 ByteBuf

Netty 强大的 ByteBuf Netty ByteBuf功能可以类比NIO 中 ByteBuffer&#xff0c;那为什么不直接使用NIO 中ByteBuffer? 主要是易用性和扩展性一些方面&#xff0c;有点可以肯定&#xff0c;Netty 基于NIO实现的&#xff0c;底层肯定用了ByteBuffer 。 jdk Buffer API 复杂性…