scrollIntoView(),描点实现滚动居中

用法

  let dom = document.getElementById(this.goId);
        dom.scrollIntoView({
          behavior: "smooth",
          block: "center",
          inline: "center",
        });

举例

<van-list class="list-content" v-model="loading" :finished="finished" finished-text="人家是有底线的~~" @load="onLoad">
    <div class="list-item" v-for="(item, index) in list" :key="index" :id="'list' + index">
      。。。
    </div>
</van-list>

template

<van-list class="list-content" v-model="loading" :finished="finished" finished-text="人家是有底线的~~" @load="onLoad">
    <div class="list-item" v-for="(item, index) in list" :key="index" :id="'list' + index">
      。。。
    </div>
</van-list>

利用vuex存储id

import { mapGetters, mapActions } from "vuex";
computed: {
    ...mapGetters(["goId", "filterStatus"]),
},
methods: {
    ...mapActions(["setId"]),
    
    checkSignRecord(item,index) {
        //点击列表时存储id
        this.setId({
          goId: 'list'+index,
        });  
      this.$router.push({
        path: "/signInNormal",
        query: {
          class_id: item.class_id,
          class_date: item.date_str,
          is_appointment_class: item.is_appointment_class
        }
      })
    },

}

store/modules/list.js

const list = {
    state: {
        goId: '',
        filterStatus: false,
        scrollLeft: 0
    },
    mutations: {
        SETHIGHSEASSONJ(state, status) {
            state.filterStatus = status
        },
        SETSCROLLTOP(state, id) {
            state.goId = id
        },
        SETSCROLLLEFT(state, scroll) {
            console.log(scroll)
            state.scrollLeft = scroll.scrollLeft
        }
    },
    actions: {
        setStatus({commit}, status) {
            commit('SETHIGHSEASSONJ', status)
        },
        setId({commit}, id) {
            commit('SETSCROLLTOP', id)
        },
        setScrollLeft({commit}, scrollLeft) {
            commit('SETSCROLLLEFT', scrollLeft)
        }
    }
}

export default list

store/getters.js

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
  roles: state => state.user.roles,
  filterStatus: state => {
    let obj = state.list.filterStatus;
    if(obj) {
      return obj.filterStatus
    } else {
      return false
    }
  },
  goId: state => {
    let obj = state.list.goId;
    if(obj) {
      return obj.goId
    } else {
      return false
    }
  },
  scrollLeft: state => state.list.scrollLeft
}

export default getters

store/index.js

import Vuex from 'vuex'
import list from './modules/list'
import getters from './getters'

const debug = true; //开发时把调试打开

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    current: Date.now(), // 当前时间
    intervalID: 0,
    loadingShow: false // 控制全局loading图层
  },
  mutations: {
    startComputeCurrent(state) {
      state.intervalID = setInterval(() => {
        state.current = Date.now()
      }, 1000)
    },
    stopComputeCurrent(state) {
      clearInterval(state.intervalID)
      state.intervalID = 0
    },
    loadingControl(state, value) {
      state.loadingShow = value
    }
  },
  modules: {
    list
  },
  getters
})

export default store

router/index.js
路由开启keepActive

 {
            path: '/checkInRecord',
            name: 'checkInRecord',
            component: resolve => require(['@/components/my/checkInRecord.vue'], resolve),
            meta: {
                title: '签到记录',
                keepActive: true
            }
        }

用keep-alive两个生命周期activated和deactivated,在activated里执行操作

beforeRouteEnter(to, from, next) {
    if (from.path == "/signInNormal") {
      to.meta.isBack = true;
    } else {
      to.meta.isBack = false;
    }
    next();
  },
  activated() {
    if (this.isLod) return;
    if (!this.$route.meta.isBack) {
      this.init();
    } else {
      if (this.filterStatus) {
        this.init();
      }
      setTimeout(() => {
        let dom = document.getElementById(this.goId);
        dom.scrollIntoView({
          behavior: "smooth",
          block: "center",
          inline: "center",
        });
      }, 500);
    }
    this.isLod = false;
    this.$route.meta.isBack = false;
  },
  deactivated() {
    this.isLod = false;
    this.$route.meta.isBack = false;
  },