一、离开当前页面之前保存滚动条高度
我的项目页面切换用到了elementUI的tabs组件,所以每次页面切换前都会调用beforeLeaveTab
方法,故在该方法中保存离开页面时滚动条的高度。
beforeLeaveTab(tab, event) {
//参数tab是要进入的页面的唯一值,event是要离开的页面的唯一值。
let _this = this
// 存滚动条位置
if (_this.$el.querySelector('.tableQh') != null) {
// querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
let scrollTop = _this.$el.querySelector('.tableQh').scrollTop
let eventHeight = event + 'height'
window.sessionStorage.setItem(eventHeight, scrollTop)
this.event = event
}
//取滚动条位置
if (tab.indexOf('_') != -1) {
let tabHeight = window.sessionStorage.getItem(tab + 'height')
this.timer = setTimeout(() => {
if (tabHeight != null) {
_this.$el.querySelector('.tableQh').scrollTop = tabHeight
}
}, 50)
}
},
二、存储离开的页面滚动条高度
离开页面时,获取当前页面的唯一值,作为key值,将当前滚动条高度存储到sessionStorage
中
if (_this.$el.querySelector('.tableQh') != null) {
let scrollTop = _this.$el.querySelector('.tableQh').scrollTop
let eventHeight = event + 'height'
window.sessionStorage.setItem(eventHeight, scrollTop)
this.event = event
}
三、获取滚动条高度
当再次返回该页面,读取存起来的页面滚动条高度,将滚动条跳转到该位置。
beforeLeaveTab(tab, event) {
//参数tab是要进入的页面的唯一值,event是要离开的页面的唯一值。
let _this = this
// 存滚动条位置
if (_this.$el.querySelector('.tableQh') != null) {
// querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
let scrollTop = _this.$el.querySelector('.tableQh').scrollTop
let eventHeight = event + 'height'
window.sessionStorage.setItem(eventHeight, scrollTop)
this.event = event
}
//取滚动条位置
if (tab.indexOf('_') != -1) {
let tabHeight = window.sessionStorage.getItem(tab + 'height')
this.timer = setTimeout(() => {
if (tabHeight != null) {
_this.$el.querySelector('.tableQh').scrollTop = tabHeight
}
}, 50)
}
},
template
内容
动态控制显示哪一个页面,每个页面的类选择器名称都相同。
<keep-alive>
<el-row v-if="tabName.indexOf('详情') != -1" class="tableQh">
<station-detail ref="czDetails"></station-detail>
</el-row>
</keep-alive>
<keep-alive>
<el-row v-if="tabName.indexOf('详情') != -1" class="tableQh">
<alternator-detail ref="fdjDetails"></alternator-detail>
</el-row>
</keep-alive>