滑动一整屏

需求:用户通过鼠标滚轮滑动的时候一整屏进行翻页。

参考网站效果

微派网络

实现思路:

1.首先我们需获取可视区域的高度

document.documentElement.clientHeight;

2.根据动态设置top属性即可进行翻页。

3.需判断上滑还是下滑

根据onmousewheel滚轮事件即可判断,开始时间为当前时间,结束时间为事件结束以后当时间,若是差值为负数到一定区间,即可判断为向上滑动,否则为向下滑动。

注意点:

我们需通过onresize缩放来监听当前的可视窗口的高度。并且每次把当前窗口的值修改到显示区域,同时top值也需进行修改。

比如我们在第二屏幕的时候,每次改变的时候我会动态生成一个数组,并且滑动的时候,是会改变其页数的,因此我可以根据页数和高度数组进而来改变其top值。

代码展示

<template><div id="wrap" :style="[{ height: `${clientHeight}px` }]"> <div id="main" :style="{ top: `${topHeight}px` }"><div class="page" :style="{ height: `${clientHeight}px` }">1</div><div class="page" :style="{ height: `${clientHeight}px` }">2</div><div class="page" :style="{ height: `${clientHeight}px` }">3</div><div class="page" :style="{ height: `${clientHeight}px` }">4</div><div class="page" :style="{ height: `${clientHeight}px` }">5</div></div><view class="pagination"><view class="circle" v-for="v in maxCount" :key="v" :class="{ 'active':currentIdx == v }" @click="gotoPage(v)"></view></view></div>
</template><script>
export default {name: 'homeIndex',components: {},data() {return {clientHeight: 0,topHeight: 0,heightArr:[],currentIdx: 1,maxCount: 5,}},mounted() {this.clientHeight = document.documentElement.clientHeight;this.getHeightArr();this.getMouseEvent();window.onresize = () => {return (() => {this.clientHeight = document.documentElement.clientHeight;this.getHeightArr();})()}},methods: {getHeightArr(){let maxCount = this.maxCount;let heightArr = [];var height = this.clientHeight;for(let i = 0; i < maxCount; i++){let currentHeight = `-${height*i}`;heightArr.push(currentHeight)}this.heightArr = heightArr;this.topHeight = this.heightArr[this.currentIdx-1];},getMouseEvent() {let that = this;var startTime = 0;var endTime = 0;var now = 0;var height = this.clientHeight;var main = document.getElementById("main");window.onmousewheel = function (e) {height = that.clientHeight;startTime = new Date().getTime();now = Number(that.heightArr[that.currentIdx-1]);if (endTime - startTime < -600) {//鼠标向上移动if (e.wheelDelta > 0 && parseInt(main.offsetTop) < 0) {now = now + height;//鼠标向下移动} else if (e.wheelDelta < 0 && parseInt(main.offsetTop) + (height * 4) > 0) {now = now - height;}setTimeout(() => {that.topHeight = now;let currentIdx = 1;if(that.heightArr && that.heightArr.length > 0){let idx = that.heightArr.findIndex((item)=>{return item == now;})currentIdx = idx+1;}that.currentIdx = currentIdx;that.$emit('get-home-scroll-idx',currentIdx)}, 20);endTime = startTime;}}},gotoPage(page){this.currentIdx = page;setTimeout(() => {this.topHeight = this.heightArr[page-1];})}}
}
</script><style lang="scss" scoped>
html,
body {height: 100%;margin: 0;padding: 0;
}#wrap {overflow: hidden;
}#main {position: relative;top: 0;transition: 0.5s;
}.page {width: 100%;
}
.pagination{position: fixed;right: 1.5%;top: 50%;transform: translateY(-50%);z-index: 9;display: flex;flex-direction: column;.circle{width: 10px;height: 10px;display: block;margin-top: 10px;background: rgba(236,68,39,0.4);border-radius: 50%;cursor: pointer;&.active{height: 40px;border-radius: 12px;background: #EC4427;}}
}
</style>

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

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

相关文章

2024-01-06-AI 大模型全栈工程师 - 如何训练百亿参数大模型

摘要 2024-01-06 周六 杭州 晴 本节内容: 讲座模式&#xff0c;学习大模型训练的相关流程。 课程内容 1. Transformer 回顾 2. 模型架构-生成式 3. 预训练数据的构建 4. 中文字典的构建 4. 预训练目标的构建 5. 预训练相关-预训练策略 6. 预训练相关-并行化训练 7. 预训练…

2024/2/1 备战蓝桥杯 3-3 二叉树

目录 二叉树的遍历 B3642 二叉树的遍历 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 完全二叉树的权值 0完全二叉树的权值 - 蓝桥云课 (lanqiao.cn) 美国血统 American Heritage P1827 [USACO3.4] 美国血统 American Heritage - 洛谷 | 计算机科学教育新生态 (luogu.c…

搭建高效企业培训平台:教育系统源码开发详解

为了更好地满足企业培训的需求&#xff0c;许多组织纷纷转向数字化教育&#xff0c;搭建高效的企业培训平台成为当务之急。本篇文章&#xff0c;小编将为您讲解教育系统源码的开发细节&#xff0c;为搭建一个功能强大、灵活高效的企业培训平台提供详尽的指南。 一、教育系统的…

Django响应(一)

一、HttpResponse与JsonResponse 1.1、HttpResponse 官网:https://docs.djangoproject.com/zh-hans/4.1/ref/request-response/#django.http.HttpResponse 返回给浏览器端的响应对象 from django.http import HttpResponse response = HttpResponse("Heres the text o…

程序的内存模型

师从黑马程序员 内存分区模型 内存大方向划分为4个区域 1、代码区&#xff1a;存放函数体的二进制代码&#xff0c;由操作系统管理的 2、全局区&#xff1a;存放全局变量环和静态变量以及常量 3、栈区&#xff1a;由编译器自动分配释放&#xff0c;存放函数的参数值&#…

代码随想录算法训练营第三十六天|509. 斐波那契数 70. 爬楼梯 746. 使用最小花费爬楼梯

509. 斐波那契数 public static int fib(int n) {// 找出最后一步// 定义损失函数 定义记忆化存储基本单元// 状态转移方程 f(n) f(n-2)f(n-1); n > 0// 边界 (递归过程中需要判断)// 初始化 (在未递归之前需要处理)// 返回答案if (n 0) {return 0;}if (n 1) {return 1;…

H12-811_503

503.如下图所示&#xff0c;下列说法正确是&#xff1f;( ) A.主机A和主机B的广播地址相同 B.主机A可以ping通主机B C.主机A和主机B不能获取对方的MAC地址 D.主机A的ARP缓存中存在如下条目10.0.12.5 MAC-B 答案&#xff1a;C 注释&#xff1a; 两个主机IP地址的网…

四大组件 - ContentProvider

参考&#xff1a;Android 这 13 道 ContentProvider 面试题&#xff0c;你都会了吗&#xff1f; 参考&#xff1a;《Android 开发艺术探索》 第 9.5 节&#xff08;ContentProvider 的工作过程&#xff09; 参考&#xff1a;内容提供者程序 参考&#xff1a;<provider>&g…

Nucleosome, Recombinant Human, H2BK120ub1 dNuc, Biotinylated

EpiCypher&#xff08;国内授权代理商欣博盛生物&#xff09;是一家为表观遗传学和染色质生物学研究提供高质量试剂和工具的专业制造商。EpiCypher生产的在E. coli中表达的重组人单核小体(组蛋白H2A、H2B、H3和H4各2个;accession numbers:H2A-P04908;H2B-O60814;H3.1-P68431;H4…

SpringMVC处理ajax请求之@ResponseBody注解,将后端数据响应到浏览器

上一篇文章讲到SpringMVC处理ajax请求用到的RequestBody注解SpringMVC处理ajax请求&#xff08;RequestBody注解&#xff09;&#xff0c;ajax向后端传递的数据格式详解-CSDN博客&#xff0c;这个注解帮我们解决了如何将客户端的数据通过json数据传递到服务器&#xff0c;简单说…

数据探索与可视化:可视化分析数据关系-中

目录 一、前言 二、介绍 Ⅰ.一个分类变量和一个连续变量 Ⅱ.两个分类变量的一个连续变量 Ⅲ.两个分类变量和两个连续变量 Ⅳ.一个分类变量和多个连续变量 ①.平行坐标轴 ②.矩阵散点图 三、结语 一、前言 在做数据分析的时候&#xff0c;很少会遇到连续变量和分类变量…

PyTorch如何支持 GPU 加速计算

在 PyTorch 中&#xff0c;torch.Tensor 是核心的数据结构&#xff0c;它与 NumPy 的 ndarray 类似&#xff0c;用于存储和操作多维数据。但与 NumPy 不同的是&#xff0c;PyTorch 的 Tensor 除了能在 CPU 上运行之外&#xff0c;还能够无缝地利用 GPU 进行计算加速。 GPU 加速…

读千脑智能笔记01_新皮质

作者简介 1988年至1992年&#xff0c;创造了平板电脑GridPad&#xff0c;它属于第一批平板电脑 1992年&#xff0c;成立了Palm公司&#xff0c;之后在长达10年的时间内&#xff0c;设计了一些最早的掌上电脑和智能手机&#xff0c;如PalmPilot和Treo 在2002年创立了红木神经科学…

《HTML 简易速速上手小册》第9章:HTML5 新特性(2024 最新版)

文章目录 9.1 HTML5 新增标签和属性9.1.1 基础知识9.1.2 案例 1&#xff1a;创建一个结构化的博客页面9.1.3 案例 2&#xff1a;使用新的表单元素创建事件注册表单9.1.4 案例 3&#xff1a;创建一个具有高级搜索功能的搜索表单 9.2 HTML5 表单增强9.2.1 基础知识9.2.2 案例 1&a…

VScode注释快捷键,RStudio注释快捷键, Texmaker注释快捷键

VScode&#xff1a;一款界面简单的代码编辑器&#xff1b;RStudio: R语言的IDE&#xff0c;包含代码编辑器&#xff0c;运行&#xff0c;绘图窗口等&#xff1b;Texmaker&#xff1a;Latex编译器&#xff08;编辑编译&#xff09;&#xff0c;界面简单&#xff0c;个人认为比Te…

ArrayList的扩容机制详解,解决面试难题!

前言 大家好&#xff0c;我是chowley&#xff0c;不知各位在面试中&#xff0c;是否被问过 ‘读没读过相关框架的源码&#xff1f;’ 这个经典问题&#xff1f;我最近就遇到了&#xff0c;虽然我之前读过&#xff0c;但这玩意干读不进味啊 今天我就来讲讲ArrayList&#xff0…

揭秘远程控制APP的便捷之美!

在这个科技日新月异的时代&#xff0c;我们的生活被各种手机软件所包围。几乎每个人都有一个甚至多个手机&#xff0c;你是否也有遇到过需要远程操作自己某一台手机的场景呢&#xff1f;今天&#xff0c;我要向大家推荐一款神奇的手机远程操作神器&#xff0c;让你可以随时随地…

Kore.ai获10亿元融资,提供定制化类ChatGPT助手

1月31日&#xff0c;生成式AI和企业对话平台Kore.ai在官网宣布&#xff0c;获得1.5 亿美元&#xff08;约10.7亿元&#xff09;融资。本次由FTV Capital 领投&#xff0c;英伟达等跟投。 Kore.ai主要提供银行、医疗、零售、营销、人力资源等多种领域的&#xff0c;定制化类Cha…

【动态规划】【C++算法】1340. 跳跃游戏 V

作者推荐 【动态规划】【字符串】【表达式】2019. 解出数学表达式的学生分数 本文涉及知识点 动态规划汇总 LeetCode1340跳跃游戏 V 给你一个整数数组 arr 和一个整数 d 。每一步你可以从下标 i 跳到&#xff1a; i x &#xff0c;其中 i x < arr.length 且 0 < x…

zsh: command not found: mysql (mac通过安装MySQL后终端cmd找不到mysql命令)

考虑是mysql环境变量没有配置的问题 1.查找mysql安装路径 ps -ef|grep mysql 2.先启动上安装的mysql 3. 查看 .bash_profile 文件 ls -al 查看是否有(.bash_profile)文件 如果没有就输入以下命令创建一个&#xff0c;再查看 touch .bash_profile 4.打开 .bash_profile 文件 …