1.新建.vue文件封装vue-scroller,并新增如下方法
getPosition(){
return this.$refs.scroller.getPosition()
},
scrollTo(x, y, animate){
this.$refs.scroller.scrollTo(x, y, animate)
}
<scroller>增加ref="scroller"
2.在使用vue-scroller的vue页面中新增如下方法
beforeRouteLeave(to, from, next) {
let key = from.query.VNK
let position = this.$refs.vuescroller.getPosition()
console.log(position)
if (key && position) {
this.$store.commit('setPosition', { key: key, position: { x: position.left, y: position.top } }) //离开路由时把位置存起来
}
next()
},
activated() {
setTimeout(() => {
let key = this.$route.query.VNK
let payload = this.$store.state.scroller.position[key] //返回页面取出来
let position = payload.position
if (position) {
this.$refs.vuescroller.scrollTo(position.x, position.y, false)
}
}, 20)
},
使用封装后的vue-scroller,记得添加ref="vuescroller"
3.这个过程中使用到store存储位置信息,故新增scroller文件夹到store中,文件中的内容为:
index.js:
import state from './state.js'
import mutations from './mutations.js'
export default {
state,
mutations
}
mutations.js
export default {
setPosition (state, payload) {
/*payload的内容
key是navigation的vnk值
position是{x,y}组合
*/
state.position[payload.key] = payload
}
}
state.js
export default {
position:{},
}
4.新增完之后,main.js配置一下store,就能够使用store