用法
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;
},