1. 程式人生 > >點選vue-scroller中的item進入其他頁面,返回時,定位到點選前的item位置

點選vue-scroller中的item進入其他頁面,返回時,定位到點選前的item位置

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