vue纪录页面滚动位置

1.页面keepAlive

2.滚动的盒子加上overflow:scroll

和-webkit-overflow-scrolling: touch;(解决苹果下不流畅)

3.盒子添加事件@scroll="contentScroll" 加上引用ref

4.method里

contentScroll (e) {
  let target = e.target || e.srcElement
  this.scrollTop = target.scrollTop
  if (target.scrollTop + target.clientHeight >= target.scrollHeight - 3) {
    this.loadArticlesByTypeAndId()
  }
},

 对应生命周期

activated () {
  this.scrollTop = sessionStorage.getItem('scrollTop')
  this.$refs.list.scrollTo(0, this.scrollTop)
},
deactivated () {
  sessionStorage.setItem('scrollTop', this.scrollTop)
},

 

 

另外,vue路由貌似可以纪录位置,但是要开启history模式,公司项目已根深蒂固没法改了,只能用这种方式实现

 

 

如果滚动的是循环出来的组件

将index传入组件

滚动距离用数组存,index存对应位置

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值