点击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

猜你喜欢

转载自blog.csdn.net/Ivor_Chan/article/details/83858556