一、跳转到指定位置
项目中数据较多，但是要在一个页面展示出来，就会需要定位功能。
例如淘宝中点击某个商品的分类会跳转到对应的模块，模块中是详细的商品信息
数据
arrayList:[{ //不一一列出来了name:'1',value:'one',active:false},{name:'2',value:'two',active:false}]
由于数据过多，为了用户体验，将要展示的数据进行了分组。
然后分组循环，将name展示为标签，然后点击标签会跳转定位到指定位置。
<span>分组2：</span><div><a href="javascript:;"v-for="(item,index) in arrayList.slice(11,16)" //将要展示的数据进行了分组，然后分组循环:key="index":class="item.active?'active':''" //点击了的标签给一个class区分开，标签加边框，高亮@click="jumpTo(item.value,index+11) //跳转的方法">{{item.name}}</a></div>
由于有的数据不止要展示，还要进行配置管理，会使用到组件。
我这里第1个数据是使用组件展示的，获取dom的时候用this.$refs[value].$el
this.$el是在mounted中才会出现的。$el
它指的是当前组件的的元素
<JumpTo ref="one" :arrayList="arrayList"/> //将数组传过去
第2条数据是直接展示的，获取dom的时候用this.$refs[value].
<div ref='box'><h3>跳转</h3></div>
之后的数据都是直接循环数组的
<div ref="numberDetail"v-show="index>3"v-for="(item,index) in arrayList":key="index+4"><h3 :class="item.active?'titleActive':''"> {{item.name}} </h3></div>
然后就是跳转的方法
将value和index传过来，组件分开进行处理
jumpTo(value,index){let el = index >3? this.$refs['numberDetail'][index]:(index == 0 ? this.$refs[value].$el:this.$refs[value]);//根据ref获取domthis.arrayList.forEach((item,index)=>{item.active = false})this.arrayList[index].active = true;//将点击的标签样式区分开document.querySelector('.app-main').scrollTop =el.offsetTop-229;//计算出scrollTop即可，跳转到指定位置},
二、记住位置，返回时跳转
获取scrollTop<div ref="numberDetail"v-show="index>3"v-for="(item,index) in arrayList":key="index+4"><h3 :class="item.active?'titleActive':''"> {{item.name}} </h3></div>
获取滚动位置是用 scrollTop
jumpTo(value,index){let el = this.$refs['numberDetail'][index]:// let el = this.$refs[value].$el// let el = this.$refs[value]);document.querySelector('.app-main').scrollTop =el.offsetTop-109;//定位到指定位置this.scroll = el.offsetTop;//储存当前scroll的值},
使用 keep-alive （<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。当组件在<keep-alive>内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。）每次返回页面会调用 activated 生命周期方法
activated() {this.$refs.wrapper.scrollTop = this.scroll; //设置scrollTop}
三、回到顶部
element有回到顶部的组件Backtop
回到顶部
/#/zh-CN/component/backtop
使用时如下
<template>Scroll down to see the bottom-right button.<el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop></template>
但有时候不符合需求，需要改动
可以自己设置按钮的样式以及位置
<div class="el-backtop" style="right: 40px; bottom: 100px;" v-show="visible" @click="backToTop"><div style="width: 100%; background-color: rgb(242, 245, 246); box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 6px; text-align: center; line-height: 40px; color: rgb(25, 137, 250);">up</div></div>
在mounted中监听滚动事件
mounted() {window.addEventListener('scroll', this.handleScroll,true)}
在方法中添加回到顶部功能
backToTop() {if (this.isMoving) returnconst start = document.querySelector('.app-main').scrollToplet i = 0this.isMoving = truethis.interval = setInterval(() => {const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))if (next <= this.backPosition) {document.querySelector('.app-main').scrollTop=this.backPositionclearInterval(this.interval)this.isMoving = false} else {document.querySelector('.app-main').scrollTop=0}i++}, 16.7)},
使用改好的backtotop组件
<back-to-top :visibility-height='20' :back-position="0" transition-name="fade"/>
最后，我的资源里有backtotop组件
backToTop
/download/weixin_43043994/11418813
