vue简易楼层跳跃（vue-scrollto）

突发奇想做一个基于vue的一个楼层跳跃，之前用js做过，但是想着说vue应该能做出更为便利的方法，上网查询了一下，发现了一个很方便的插件 vue-scrollto。

使用方法就不在这里多说了，链接里有进行详细的说明。

先用npm安装

   npm install --save vue-scrollto

然后在main.js里引入

const VueScrollTo = require('vue-scrollto')Vue.use(VueScrollTo)// You can also pass in the default options
Vue.use(VueScrollTo, {container: 'body',   // 滚动元素duration: 500,  // 动画时长easing: 'ease',  // 动画曲线offset: 0,  // 滚动终点距离父元素顶部距离force: true,  // 强制立即执行，即便元素是可见的cancelable: true,onStart: false,onDone: false,onCancel: false,x: false, // x 轴禁止滚动y: true
})

之后便可以在后续的代码里使用了

做的很简易，就分了五个楼层然后进行跳跃。

<div><divclass="list"v-for="(item, index) in title":key="index":id="['element' + index]">{{ item.name }}</div></div><ul class="jumpbtn"><li class="btn" v-for="(item, index) in title" :key="index"><a href="#" v-scroll-to="'#element' + index"> {{ item.name }}</a></li></ul>

想了想又加上了高亮的功能

可以滚动到该区域或者是点击该区域则侧边导航栏高亮

li的类名也要动态获取

:class="{active : num == index}"

然后定义一个函数，获取滚动距离，我的设定是每个楼层500px，所以对此进行计算。

handleScroll() {// 获取滚动距离let scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;var a = parseInt(scrollTop / 500);// 判断滚动距离if (scrollTop >= 0 && scrollTop < 500) {this.num = 0} else if (scrollTop > 500) {this.num = a }

再在mouted里面监听

mounted() {// 监听window.addEventListener("scroll", this.handleScroll);},

最后一定要记得销毁，不然其他板块会报错

destroyed() {// 销毁监听document.removeEventListener('scroll', this.handleScroll);},

vue简易楼层跳跃（vue-scrollto）相关推荐

vue简易微前端项目搭建（一）：项目背景及简介
github传送门: 1.h5主项目 2.项目脚手架 3.子项目模板系列文章传送门: vue简易微前端项目搭建(一):项目背景及简介 vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建 vu ...
vue简易微前端项目搭建（二）：子项目模板及项目脚手架搭建
github传送门: 1.h5主项目 2.项目脚手架 3.子项目模板系列文章传送门: vue简易微前端项目搭建(一):项目背景及简介 vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建 vu ...
VUE简易图形验证码
VUE简易图形验证码直接进入正题一.安装indetify npm install identify 二.创建一个组件对是一个组件将下面代码直接复制进组件即可 <template>& ...
vue简易计算器—码虫带你飞
简易计算机案例 1.HTML 代码结构 <div id="app"><input type="text" v-model="n1&q ...
包含Demo示例，包含实列，vue插件汇总，vue组件大全，
目录一.UI组件及框架二.滚动scroll组件三.slider组件四.编辑器五.图表六.日历七.地址选择八.地图九.播放器十.文件上传十一.图片处理十二.提示十三.进度条十 ...
js实现楼层跳跃（点击楼层按钮可对应到楼层，滚动到某一楼层对应的楼层按钮高亮）...
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
vue教程入门视频,vue入门视频教程
vue是什么 ?怎么用? vue是一个视频剪辑软件.在我们制作(自行拍摄之前)可以来设置拍摄时候的色调滤镜,拍摄的时长,这些拍摄的视频,可以直接用到我们要制作的剪辑小视屏当中. 调用手机里的小视屏.可 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础：使用Vue.js 来画博客首页（一）...
缘起书说前两篇文章< 十五 ║ Vue前篇:JS对象&字面量&this>和 < 十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面 ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...

vue简易楼层跳跃（vue-scrollto）

vue简易楼层跳跃（vue-scrollto）相关推荐

最新文章

热门文章