vue+vuex 回退定位到初始位置

你的名字 2022-10-02 08:47 148阅读 0赞

先放出两张图（没错，你还在9012，做为一名资深设计师我唯一的技能点就是留白），简单说明下问题  
未做回退定位（从落地页回退，每次都回到A位置）想死啊有木有，每次都需要手动重新定位来选择，你大哥看到你做个这肯定想扣死你：

![1646465-20190417152206774-2128387120.gif][]

添加回退定位后（从落地页回退，定位到点击位置）哈，好用到爆 有木有~：

![1646465-20190417152215461-2084748726.gif][]  
按照WBD国际通用惯例（我编的），先对这个demo中用到的文件做一个索引，方便对整个回退功能有个宏观的视角，更容易理解整个流程是怎么走通的，做到心中有术。  
这个回退定位demo共涉及到5个文件，分别如下：  
BackToA.vue 组件A，也就是需要回退定位的组件，也就是开篇的车祸现场  
Alphabet.vue 组件B，跳转落地页，不重要  
index.js 在这个文件中进行，配置路由，添加meta属性(keepAlive)，很重要  
App.vue 模板文件，引入组件（router-view），依据路由是否添加meta属性判断是否启用keep-alive进行组件缓存  
main.js 入口文件，引入vuex，在state定义\_scrollTop来记录scrollTop值，和改变state值的actions方法来提交mutation更新状态  
demo目录结构如下图：

![1646465-20190417152243073-1766221552.png][]

看到这，有没有感觉很宏观。是不是心中有了术，对这个小demo产生了王的蔑视。少年请留步，话说，有术无道，止于术，再给我两分钟，让我把记忆结成冰，说“道”。  
道：首先对组件BackToA启用keep-alive缓存，当组件BackToA上下滚动时记录当前页的scrollTop值，并把这个值存储在vuex的state中。当从落地组件B回退到组件BackToA时，缓存生效，组件BackToA不再重新渲染。此时拿到vuex state中存储的scrollTop值，赋值给BackToA组件，实现定位到跳转前的位置。  
其实我是一名程序员，ok，下面开始我们喜闻乐见的编程环节。  
**1.引入vuex存储scrollTop值**  
因为vuex是整个流程的核心，先把这部分放到第一个梳理清楚方便后面的流程持续进行（我们都受过被打断的伤痛在我这决不允许）（打断的都是工作，没有其它的乱七八糟的什么东西不要乱联想）。  
打开入口文件main.js（一般都是这个文件），在这个文件中定义一个store常量、存储一个\_scrollTop来存储组件上下滚动时页面的scrollTop值、引入vuex，并启用

源码如下

import Vuex from 'vuex'
    Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
    _scrollTop: 0 // 存储组件的scrollTop值
    },
    mutations: {
    updatePosition (state, payload) {
    state._scrollTop = payload.top // 更改scrollTop值
    }
    },

actions: {
    updatePosition ({commit}, top) { 
    commit({type: 'updatePosition', top: top}) // 提交mutation 更改状态
    }
    }
    })

**2.创建组件BackToA**

①引入vuex中的mapState和mapActions

import { mapState, mapActions } from 'vuex'

②在computed计算属性中定义demoTop变量，并读取state中的\_scrollTop值给其赋值

computed: {
    ...mapState({
    demoTop: state => state._scrollTop, // 获取 state 中存储的top值
    }),
    },

③创建监听页面滚动方法，实时监听当前页面的scrollTop值，这个监听放在mounted钩子中触发的原因是：此时页面dom已经渲染完毕

mounted: function () {
    console.log("==mounted===");
    document.querySelector('.hello').addEventListener('scroll', this.handleScroll, false);
    },

methods:{
    handleScroll(){
    this.box = document.querySelector('.hello')
    }, 
    },

④实时获取当前页面scrollTop值，提交mutation更新状态

methods:{
    handleScroll(){
    this.box = document.querySelector('.hello')
    this.updatePosition(this.box.scrollTop)
    }, 
    ...mapActions([
    'updatePosition'
    ]), 
    },

⑤缓存数据读取，更新scrollTop值，实现定位

activated () {
    document.querySelector('.hello').scrollTop = this.demoTop // 更新缓存组件的scrollTop值
    },

⑥页面布局

注：我们在这个例子中得到的scrollTop值，是属于class='hello'的，所以在组件中BackToA必须只有class='hello'的div支持 overflow:scroll才行

<template>
    <div class="hello">
    <ul>
    <li v-for="(item,index) in 26" :key="index">
    <router-link :to="{ name: 'Alphabet', params: { letter: String.fromCharCode(64+item) }}">{
         {String.fromCharCode(64+item)}}</router-link> 
    </li> 
    </ul>
    </div>
    </template>
    <style scoped>
    .hello{
    height:600px;
    overflow:scroll;
    }
    .hello>ul{
    height:auto;
    overflow:hidden;
    background:#eee;
    }
    .hello>ul>li{
    height:60px;
    line-height:60px;
    width:100%;
    float:left;
    margin:0;
    border-bottom:1px dashed #ccc;
    }
    </style>

**3.创建落地组件Alphabet**

<template>
    <div class="hello">
    <div><button @click="goback">goback</button></div>
    <ul>
    <li>
    this is <strong>{
         { $route.params.letter }}</strong>
    </li> 
    </ul>
    </div>
    </template>

**4.配置组件缓存**

①在router/index.js文件中给/backto/backtoa路由添加meta缓存属性：meta: \{ keepAlive: true \}

{
    path: '/backto/backtoa',
    name: 'BackToA',
    component: BackToA,
    meta: { keepAlive: true }
    }

②在App.vue模板文件中根据是否添加meta属性判断是否开启缓存机制：

\*\*本篇完再见\*\*

转载于:https://www.cnblogs.com/ligulalei/p/10723841.html

[1646465-20190417152206774-2128387120.gif]: /images/20220113/5a34db30efe1494cb1f36ff817dd96d6.png
[1646465-20190417152215461-2084748726.gif]: /images/20220113/6d6a107a08e24a36bec6439a37f752af.png
[1646465-20190417152243073-1766221552.png]: /images/20220113/7fa35c8587f946bfa8b48a67bc217116.png