點選vue-scroller中的item進入其他頁面,返回時,定位到點選前的item位置
阿新 • • 發佈:2018-11-08
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