vue 点击平滑到指定位置并绑定页面滑动效果

1.html元素

写出对应的数据块(注意添加ref) 用于获取元素位置

<template><div class="index-page" ><div class="top-head" ref="index"><img src="logo.png" style="height: 40px;margin-right: 20px;"><span v-for="(item,index) in meuns" @click="scrollingTo(index)" :style="index == meunIndex? 'border-bottom: 5px solid #2461FB;color:#2461FB':''">{{item}}</span><div class="head-button"><button>登录</button><button style="color: #2461FB;background: #ffffff;">注册</button></div></div><div class="top-slogan"><div>产品与服务XX介绍</div><span v-for="item in texts" >{{item}}</span><button>立即注册 -></button></div><div class="information-block" style="margin-top: -200px;background: #ce4a92"><div class="title">产品与服务XX</div></div><div class="information-block"><div class="title">收益说明</div><div class="title-xia">使您XX的现场XX显下降</div></div><div class="information-block" style="background: #c4ce93"><div class="title">功能亮点说明</div><div class="title-xia">一旦使用XX,现场工艺XX力将急剧提高</div></div><div class="information-block"><div class="title">服务流程</div></div><div ref="productOverview" class="information-block" style="background: #ce7a7e"><div class="title">产品概览</div><div class="title-xia">XX平台</div></div><div class="information-block" style="background: #599ece"><div class="title">专业可靠的XX服务商</div></div><div ref="edgeDevices" class="information-block" style="background: #cdce4c"><div class="title">XX设备</div><div class="title-xia">通过XX托管服务</div></div><div ref="companyCase" class="information-block" style="background: #13ce66"><div class="title">公司案例介绍</div><div class="title-xia">为XX产品与服务</div></div></div>
</template>

2.styley样式区域

给数据快添加样式以便更好体现效果

<style lang="scss" scoped>.top-head{position: fixed;display: flex;top: 0;width: 100%;background: rgba(255,255,255,0.7);padding: 10px 100px;z-index: 10;}.top-head span{line-height: 30px;padding: 10px 10px;margin: 0 10px;cursor: pointer;}.head-button{position: absolute;right: 100px;height: 60px;padding-top: 10px;}.head-button button{cursor: pointer;background: #2461FB;border-radius: 10px;border: none;color: #ffffff;padding: 8px 30px;margin-right: 10px;border: 2px solid #2461FB;}.top-slogan{background: #8afbee;background-size: 100% 100%;width: 100%;height: 800px;padding: 260px 100px;}.top-slogan div{padding: 30px 10px;font-size: 32px;font-weight: 800;}.top-slogan span{padding: 5px 10px;font-size: 16px;display: block;width: 500px;}.top-slogan button{background: #2461FB;border-radius: 10px;border: none;color: #ffffff;padding: 10px 30px;margin-top: 60px;cursor: pointer;}.information-block{margin: 0 100px 20px;border-radius: 20px;box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);height: 1000px;background: #0a76a4;}.information-block .title{font-size: 24px;color: #000000;font-weight: 800;text-align: center;margin: 10px 0;padding-top: 20px;}.information-block .content{margin: 10px 10%;width: 80%;}.information-block .title-xia{font-size: 16px;color: #697382;text-align: center;margin: 10px 0;}
</style>

3.最后添加js代码

实现最终效果

<script>export default {name: 'index',data() {return {meuns:['首页','产品','案例','关于'],meunrefs:['index','productOverview','edgeDevices','companyCase'],meunIndex: 0,}},mounted() {// 监听页面滚动事件window.addEventListener("scroll", this.scrolling);},methods: {scrolling() {const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;let meunScrolling = this.getScrollTop();for(let i in meunScrolling){if(scrollTop <= meunScrolling[i]){this.meunIndex = i;return;}}this.meunIndex = 3;},getScrollTop(){let tops = []for (let  i = 1;i < this.meunrefs.length;i++){let ref = this.meunrefs[i];let top = this.$refs[ref].getBoundingClientRect().top + window.scrollY - 120;tops.push(top);}return tops;},scrollingTo(num){let top = 0;if(num !== 0){let ref = this.meunrefs[num];top = this.$refs[ref].getBoundingClientRect().top + window.scrollY - 100;}window.scrollTo({top: top, behavior: "smooth"});setTimeout(()=>{this.meunIndex = num;},100)}},beforeDestroy() {window.removeEventListener("scroll", this.scrolling);},}
</script>

最终效果

 

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

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

相关文章

大模型面试常考知识点1

文章目录 1. 写出Multi-Head Attention2. Pre-Norm vs Post-Norm3. Layer NormRMS NormBatch Norm 4. SwiGLU从ReLU到SwishSwiGLU 5. AdamW6. 位置编码Transformer位置编码RoPEALibi 7. LoRA初始化 参考文献 1. 写出Multi-Head Attention import torch import torch.nn as nn …

【VMware】vSphere 8.0 安装和设置简介

本信息的目标读者为熟悉虚拟机技术和数据中心操作并具有丰富经验的 Windows 或 Linux 系统管理员。 vSphere 8.0 提供了各种安装和设置选项&#xff0c;这些选项定义了相应的任务序列。 vSphere 的两个核心组件是 ESXi 和 vCenter Server。ESXi 是可用于创建和运行虚拟机和虚拟…

【算法】最短路问题 bfs 到 dijkstra

1976、到达目的地的方案数 你在一个城市里&#xff0c;城市由 n 个路口组成&#xff0c;路口编号为 0 到 n - 1 &#xff0c;某些路口之间有 双向 道路。输入保证你可以从任意路口出发到达其他任意路口&#xff0c;且任意两个路口之间最多有一条路。 给你一个整数 n 和二维整…

laravel8 导入 excel常见问题

上传xls 或 xlsx 文件后&#xff0c;文件解析为 zip 格式&#xff0c;输入正常情况&#xff0c;不影响解析 里面的内容 遇到解析内容&#xff0c;解析为空的情况&#xff0c;可能是 因为excel 存在多个 Sheet1 造成&#xff0c;服务器不能解析一个 Sheet1 的情况&#xff0…

小程序获取手机号,用户昵称,头像

一、手机号 在微信小程序中&#xff0c;获取用户手机号也需要用户的明确授权。你可以使用 button 组件的 open-type 属性设置为 getPhoneNumber 来实现这个功能。当用户点击这个按钮时&#xff0c;会弹出一个对话框请求用户的授权。如果用户同意&#xff0c;你可以在 bindgetp…

如何通过优质服务建立客户忠诚度,促进口碑传播

在生活中&#xff0c;我们经常听到“客户忠诚度”一词&#xff0c;但很少有人真正理解客户忠诚度的含义。其实&#xff0c;客户忠诚度是指企业忠实于其所提供的产品或服务的程度&#xff0c;客户忠诚度对企业和个人都非常重要。高忠诚度的客户会给企业带来巨大的经济和社会效益…

VMware虚拟机故障:“显示指定的文件不是虚拟磁盘“,处理办法

一、故障现象 由于虚拟机宕机&#xff0c;强制重新启动虚拟机后显示错误&#xff0c;没有办法启动虚拟机。 虚拟机有快照&#xff0c;执行快照还原&#xff0c;结果也不行&#xff0c;反复操作&#xff0c;在虚拟机文件目录出现很多莫名文件 二、故障原因 根据故障提示&#…

Swift 初学者趣谈:一招教你记住模式匹配 if case let 的语法,永不忘记

概览 相信初学 Swift 头发茂盛的小伙伴们都对 Swift 简洁且极富表现力的语法倾心不已。不过凡事皆有例外&#xff0c;模式匹配&#xff08;Pattern Matching&#xff09;的语法就是其中之一。 在本篇博文中&#xff0c;您将学到如下内容 概览1. 诡异的 if case let 语法&…

代码随想录算法训练营第二十五天 | 669. 修剪二叉搜索树、108.将有序数组转换为二叉搜索树、538.把二叉搜索树转换为累加树

669. 修剪二叉搜索树 题目链接/文章讲解&#xff1a; 代码随想录 视频讲解&#xff1a; 你修剪的方式不对&#xff0c;我来给你纠正一下&#xff01;| LeetCode&#xff1a;669. 修剪二叉搜索树_哔哩哔哩_bilibili 解题思路 在上一题的删除二叉树节点中&#xff0c;我们通过在…

python实现星号打印出金字塔

#编程实现下列图形的打印 a input() for i in range(int(a)//21): num * * ((i1)*2-1) print(num.center(int(a), )) 编译后通过。输入20后得到下面的星号金字塔

麒麟kylin-v10系统,虚拟机kvm的使用

kvm的使用 虚拟机新建 点击选择对应的iso文件 选择相应的系统 &#xff08;注意&#xff0c;如果这里没有相应的系统比如&#xff1a;windows&#xff0c;可以直接选择Generic default这是通用默认的意思&#xff09; 选择cpu 完成即可 等待安装完毕 网络设置-ssh连接 虚拟…

在 Navicat 17 创建一个数据字典

即将于 5 月 13 日发布的 Navicat 17&#xff08;英文版&#xff09;添加了许多令人兴奋的新功能。其中之一就是数据字典工具。它使用一系列 GUI 指导你完成创建专业质量文档的过程&#xff0c;该文档为跨多个服务器平台的数据库中的每个数据元素提供描述。在今天的博客中&…

企业网络需求及适合的解决方案

近年来&#xff0c;企业网络通信需求可谓五花八门&#xff0c;变幻莫测。它不仅为企业的生产、办公、研发、销售提供全面赋能&#xff0c;同时也让企业业务规模变大成为了可能。 在当前的技术格局下&#xff0c;中大型企业常见的技术方案有很多&#xff0c;而同时也有各自不可替…

docker部署minio和业务服务因变更minio密码导致访问不到图片的问题

问题起因 业务application和minio都是docker部署。按部署规则minio的环境变量中设置了MINIO_ROOT_USER和MINIO_ROOT_PASSWORD。这样就可以用这套用户名密码登录minio了。而我的application中是通过api访问minio获取资源URL&#xff0c;提供给前端的。所以在application的环境变…

4种最佳后端开发语言(2024版本)

本文发表于 入职啦 公众号。 什么是后端语言&#xff1f; 在开发方面&#xff0c;前端和后端技术之间有非常明显的区别。 Web开发方面虽然由于浏览器兼容性&#xff0c;前端生态系统仅限于 JavaScript&#xff08;和其他基于 JavaScript 的语言&#xff0c;如 TypeScript&…

C++笔试强训day17

目录 1.小乐乐改数字 2.十字爆破 3.比那名居的桃子 1.小乐乐改数字 链接 简单把他当成字符串遍历即可。 详细代码&#xff1a; #include <iostream> #include <string> using namespace std; int main() {string s;cin >> s;for (int i 0; i < s.si…

MySQL innodb_buffer_pool_size 相关常用语句

对于MySQL速度慢的问题&#xff0c;除了优化 SQL 以外&#xff0c;应该必须优先想到的即使 MySQL 数据库的 innodb_buffer_pool_size 配置问题。 一般来说&#xff0c;innodb_buffer_pool_size 的默认大小都是很小的&#xff0c;尤其是 win 下其默认大小更是只有离谱的 8M。Li…

1-2亿条数据需要缓存,如何合理设计存储

单机是不可能的&#xff0c;肯定是分布式存储 数据怎么落&#xff1f; 一般业界有三种解决方案 哈希取余分区 一致性哈希算法分区 哈希槽分区&#xff08;大厂专用&#xff0c;都在用&#xff09;最终的选择

地下工程中测斜仪的关键应用

地下工程&#xff0c;如隧道、地铁和基坑等项目的建设&#xff0c;对于现代城市的发展至关重要。然而&#xff0c;这些工程的实施往往伴随着诸多风险&#xff0c;特别是与周围土体的稳定性有关的风险。为了确保工程的安全进行&#xff0c;实时监测技术变得尤为关键。其中&#…

Ubuntu18.04--虚拟机配置Samba并从Windows登录

前言&#xff1a; 本文记录我自己在Windows上安装 Virtualbox &#xff0c;并在Virtualbox中安装 Ubuntu-18.04 虚拟机&#xff0c;在Ubuntu-18.04虚拟机里安装配置Smaba服务器&#xff0c;从 Windows 宿主系统上访问虚拟机共享samba目录的配置命令。 引用: N/A 正文 虚拟…