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://www.hqwc.cn/news/702800.html

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

相关文章

一图流解释Java中线程状态的转换

目录 一.Java中的几大线程状态 二.线程之间的相互转换 ▐ NEW --> RUNNABLE ▐ RUNNABLE <--> WAITING ▐ RUNNABLE <--> Timed Waiting ▐ RUNNABLE<--> BLOCKED ▐ RUNNABLE<-->TERMINATED 一.Java中的几大线程状态 简单来说线程可以处于…

Unity里的Time

Time and frame rate management Time类&#xff1a; Time script reference page. 一些常见的属性有&#xff1a; Time.time 返回从游戏开始经历的时间.Time.deltaTime 返回从上帧结束到现在经历的时间&#xff0c;和帧率成反比Time.timeScale 控制时间流逝的因子Time.fixe…

STM32_HAL_TIM_通用计时器_实现计时

项目思路 1使用定时器计数每秒一次 2使用一个变量记录定时器响应多少次 3使用UART将记录的次数发出 1STM32Cude设置 1配置时钟源 2打开UART 3打开TIM2 3.1界面介绍 3.2选项介绍 Slave Mode&#xff08;从模式&#xff09;&#xff1a;当设备被设置为从模式时&#xff0c…

推荐网站(10)storyset故事集 |免费定制、制作动画和下载插图

今天介绍一个免费定制、制作动画和下载插图的网站storyset故事集。Storyset故事集是一个提供丰富动画插图资源的在线平台&#xff0c;它不仅免费&#xff0c;而且用户友好&#xff0c;可以极大地丰富你的演示文稿&#xff08;PPT&#xff09;和其他视觉内容。 通过Storyset故事…

替补url

检查图片数量是否为6张,如果图片数量不足6张&#xff0c;则用本地图片补充当前位缺失的URL <div class"right-pic-box" v-for"(i, index) in imagesWithReplacement" :key"index"><img :src"i" width"316" height&…

Axure “情形”的使用

这篇笔记的主要内容是如果在Axure中使用“情形”&#xff0c;对应在我们的研发中就是“判断条件”的使用 Axure情形的使用Axure添加caseAxure的if &#xff0c;sele if 条件判断 条件判断不管是在研发代码中还是实际生活中&#xff0c;无处不在&#xff0c;只是表现形式不同罢…

牛客热题:二叉树的最大深度

&#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;力扣刷题日记 &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 文章目录 牛客热题&#xff1a;二叉树的最大深度题目链接方法一…

C++ 程序员常用的VScode的插件

vscode中好用的插件 Better CommentsBookmarksC/C ThemeChinese (Simplified) (简体中文) Language Pack for Visual Studio CodeclangdClang-FormatCodeLLDBCMakeCMake ToolsCode RunnerCode Spell CheckerCodeSnapColor Highlightvscode-mindmapDraw.io IntegrationError Len…

图文详解JUC:Wait与Sleep的区别与细节

目录 一.Wait() 二.Sleep() 三.总结Wait()与Sleep()的区别 一.Wait() 在Java中&#xff0c;wait() 方法是 Object类中的一个方法&#xff0c;用于线程间的协作。当一个线程调用wait() 方法时&#xff0c;它会释放对象的锁并进入等待状态&#xff0c;直到其他线程调用相同对…

常用的一些字符转换工具--web(在线进制转换)

十进制 转2进制&#xff0c; 16进制 十进制浮点数转16进制&#xff08;4个Byte) http://www.speedfly.cn/tools/hexconvert/

基于EBAZ4205矿板的图像处理:11阈值系数可调的图像局部阈值二值化

基于EBAZ4205矿板的图像处理&#xff1a;11阈值系数可调的图像局部阈值二值化 先看效果 还是一样拿我的pynq当模特&#xff0c;然后用usb——HDMI采集卡把输出图像采集到电脑上。 注意看右边mobelxtem中的通过串口调节的参数&#xff0c; 我这里是实现了阈值系数可调的局部阈…

深入 Go 语言:使用 math/rand 包实现高效随机数生成

深入 Go 语言&#xff1a;使用 math/rand 包实现高效随机数生成 介绍math/rand 包的核心功能设计哲学应用场景 基础使用方法初始化和种子设置设置种子创建私有随机数生成器 基础函数详解生成整数生成特定范围的整数生成浮点数随机置乱数组 进阶技巧随机数的统计属性生成正态分布…