【4858美高梅】消除Vue页面固定滚动地点的拍卖措施,vue监听滚动事件达成滚动监听

By admin in 4858美高梅 on 2019年6月1日

一,设置keepAlive:是或不是缓存

主题素材讲述:

近年做项目碰到叁个主题素材,正是Vue滚动不牢固,网络找了有的材料,说下 vue
固定滚动地方的拍卖办法.

在vue中落实滚动监听和原生js无太大差距,下边是几个简易的demo,可在调整台查看结果

router:
{
path: '/actlist',
name: 'actlist',
component: actlist,
meta: {
keepAlive: true
}
}

【4858美高梅】消除Vue页面固定滚动地点的拍卖措施,vue监听滚动事件达成滚动监听。列表页进入实际情况页,或许tab页切换,然后再回到列表页,希望能切换来前边滚动地方

主题素材讲述:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script type="text/javascript" src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
 <style type="text/css">
 #box {
  width: 100%;
  height: 2000px;
 }
 </style>
</head>
<div id="box"></div>
<body>
 <!-- vue监听滚动事件 -->
 <script type="text/javascript">
 var vm = new Vue({
   el:'#box',
  data() {
   return {
    scroll: ''
   }
  },
  methods: {
   menu() {
    this.scroll = document.body.scrollTop;
    console.log(this.scroll)
   }
  },
  mounted() {
   window.addEventListener('scroll', this.menu)
  },
 })
 </script>
</body>
</html>

二,设置渲染页面

赶尽杀绝问题思路:

一般说来见于 列表页List -> 详细情况页Detail 的景象, 从列表的某一项x
进入到详细情形页, 再回去的时候, 希望列表的岗位固定在x, 而不是回到最上端了.

如上正是本文的全体内容,希望本文的始末对大家的读书只怕工作能带动一定的协理,同期也期待多多协理脚本之家!

app.vue

4858美高梅,切换来别的页前边记录地点,再次回到列表页的时候回来地方。那就要求正视vue-router的beforeRouteEnter和beforeRouteLeave那四个钩去完结.

vue-router 里面是有三个 scrollBehavior 的, 然而以此家伙只万幸 history
情势下边采取, 而本人用的 hash 方式.

你恐怕感兴趣的小说:

  • 焚林而猎Vue页面固定滚动地点的管理办法
  • vue-scroller记录滚动地方的演示代码
  • vue
    scroller重返页面记住滚动地点的实例代码
  • 详解使用vue-router举办页面切换时滚动条地点与滚动监听事件
  • vue通过滚动行为完结从列表到详细情况,重临列表原岗位的主意
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

再有一种更简短残酷的艺术,
vue-scroller.min.js源码中增添宽高不为零判别,完毕情势见争持,是近日代码优化的时候发掘的。

因而大家要团结达成嘛, 思路轻松:List 里面监听滚动, 记录滚动地方 pos, 从
Detail 再次来到到 List 里面包车型客车时候, 读取 pos.

3,记录滚动地方并赋值

代码部分:

 mounted () {
  // 读
  setTimeut(function(){
   document.body.scrollTop = parseInt(sessionStorage.getItem('pos'));
  }, 1000);
  // 存
  window.onscroll = function () {
   sessionStorage.setItem('pos', document.body.scrollTop);
  }
 }
beforeRouteEnter(to,from,next){
if(!sessionStorage.askPositon || from.path == '/'){//当前页面刷新不需要切换位置
sessionStorage.askPositon = '';
next();
}else{
next(vm => {
if(vm && vm.$refs.my_scroller){//通过vm实例访问this
setTimeout(function () {
vm.$refs.my_scroller.scrollTo(0, sessionStorage.askPositon, true);
},0)//同步转异步操作
}
})
}
},
beforeRouteLeave(to,from,next){//记录离开时的位置
sessionStorage.askPositon = this.$refs.my_scroller && this.$refs.my_scroller.getPosition() && this.$refs.my_scroller.getPosition().top;
next()
}
beforeRouteEnter(to,from,next){

 if(!sessionStorage.askPositon || from.path == '/'){//当前页面刷新不需要切换位置

  sessionStorage.askPositon = '';

  next();

 }else{

  next(vm => {

    if(vm && vm.$refs.scrollerBottom){//通过vm实例访问this

     setTimeout(function () {

      vm.$refs.scrollerBottom.scrollTo(0, sessionStorage.askPositon, false);

     },0)//同步转异步操作

    }

  })

 }

},

beforeRouteLeave(to,from,next){//记录离开时的位置

 sessionStorage.askPositon = this.$refs.scrollerBottom && this.$refs.scrollerBottom.getPosition() && this.$refs.scrollerBottom.getPosition().top;

 next()

}, 

遇见了三个题目:

总结

内需注意的点:

老是回到 List, 都以一直滚动到顶上部分, 每便都以, 每一遍都以! 把 pos 打印出来,
开采是 0, 而不是大家所存的值. 日了, 明明切换在此之前还不易, 回来就不是了.

如上所述是笔者给我们介绍的vue
scroller再次回到页面记住滚动地点的实例代码,希望对我们持有援助,借使大家有别的疑问请给本身留言,作者会及时还原我们的。在此也特别多谢大家对台本之家网址的支持!

1.熟悉vue-router和vue-scroller的api

接下来开采了路由每便切换都会触发 onscroll 事件, 日了狗,
为毛.笔者都尚未滚动页面, 为啥会触发 onscroll 事件。

你或者感兴趣的小说:

  • 杀鸡取蛋Vue页面固定滚动地点的管理办法
  • vue-scroller记录滚动地点的演示代码
  • 详解使用vue-router实行页面切换时滚动条地点与滚动监听事件
  • vue监听滚动事件达成滚动监听
  • vue通过滚动行为完结从列表到实际情况,重回列表原岗位的不二等秘书籍

2.beforeRouteEnter的时候,是无能为力透过this去做客vue实例的,必要借助vm

刚早先不可思议 hash 变化会造成 onscroll 事件的触发,
所以小编就在浏览器里面手动输入了多少个不设有的路由:

3.setTimeout 0 的使用

/foo
/bar

等前一周发版的时候,作者贴上链接,能够体会下效果

未曾开掘 scroll 被触发, 所以这一个嫌疑排出.

如上正是本文的全体内容,希望对大家的就学抱有扶助,也期望我们多多援助脚本之家。

下一场嘀咕 vue-router 里面是或不是绑定了 scroll 事件, 没察觉然后又想, 没绑定
scroll 事件, 那么修改 scrollTop 值会不会也触发 scroll 事件.

你可能感兴趣的稿子:

  • 解决Vue页面固定滚动地方的管理格局
  • vue
    scroller重返页面记住滚动地方的实例代码
  • 详解使用vue-router进行页面切换时滚动条地点与滚动监听事件
  • vue监听滚动事件实现滚动监听
  • vue通过滚动行为完毕从列表到详细情形,重返列表原岗位的措施

行吗还开采新知识点了:

scrollTop 值的改变, 的确会触发 scroll 事件.

那就是说作者就想, 是或不是 vue-router 里面存在修改 scrollTop 值的一言一行,
也并未有察觉.

接下来笔者又想, 数据是动态渲染的, 所以是还是不是和因素的增加和删除改查相关。

要素扩张-> 页面中度变了 -> 页面中度变化, 也触发 scroll 事件?

由此小编用 vue-cli 新建了花色, 放了多少个从未增删改查的路由

接下来日了狗的, 我看见从 foo -> bar -> foo, 的时候,
foo的滚动条地方还在后边作者滚动到的地点.

出人意外想起来浏览器是能够友善记录滚动条地方的.

是还是不是浏览器干的?

从详情页返回到列表页面, 列表会重新渲染, 时序大概是这样:
返回列表页 1
渲染页面   2

而浏览器恢复生机滚动条的任务的操作, 是在 一 和 2 之间,
那年就出标题了:假若您页面上边的数额都以渲染出来的, 浏览器就能开掘:

页面的高度<=屏幕的高度, 不存在滚动条, 此时 document.body.scrollTop = 0;
所以会设置 document.body.scrollTop = 0
修改了 document.body.scrollTop 触发了 scroll 事件, scroll 里面又重写了 pos

等您多少渲染结束之后, 读到的就是 0了.

比如发掘你页面中度超越荧屏中度, 不过页面高度是 n, 而 pos 的值是: n + x,
比当前页面包车型大巴最大的 scrollTop 值还大, 这年, document.body.scrollTop
的值就能够等于 n.
当您的多少渲染结束, 开首牢固, 日了, 没定准.

故而大家要消除那一个主题素材.

自然是想开了 keep-alive, 刚启用的时候, 发掘真正不错. 可是还要也开掘:

列表项目靠前的, 往返操作的定位都很准, 越未来越足够, 直接拉到底,
再回来发掘平昔到的貌似都以首个第多个列表项目.

之所以那几个就很风趣了, 小编差十分的少预计了须臾间浏览器的轮转地点恢复生机行为:

当 hashchange 的时候。得到最近页面包车型客车 document.body.scrollTop 值,
和友好积攒的滚动条地方。2者取最小的值, 设置成当前的
document.body.scrollTop 的值, 当使用 keep-alive 的时候, 因为 hashchange
事件处理和页面渲染是并行的, 所以一时hashchange 获得的 document
的万丈是现已渲染过多少个成分的万丈, 那一个正是干什么定不准的原因.

好呢, 以后的动静是:

keep-alive 定不准, 不可靠, 所以需要我们自己来重新定位.

ok, 1 先绑定 scroll 事件:

 var map = {};
 window.onscroll = function() {
  map[location.hash] = document.body.scrollTop;
 }

二 再屏蔽掉浏览器自动恢复生机滚动地方行为带来的熏陶

a 在 hashchange 时强制 document.body.scrollTop = 0

b 在 scroll 事件之中, 当 document.body.scrollTop = 0 的时候不做 存操作.

 var map = {};
 window.onhashchange = function() {
  document.body.scrollTop = 0;
 }
 window.onscroll = function() {
  if (document.body.scrollTop) {
   // 存
   map[location.hash] = document.body.scrollTop;
  } else {
   // 读
  }
 }

三 在读操作里面, 设置3个定时职分, 去推断 document.body.scrollTop
的值和您保存的地点是或不是千篇一律的

 var map = {};
 window.onhashchange = function() {
  document.body.scrollTop = 0;
 }
 window.onscroll = function() {
  if (document.body.scrollTop) {
   // 存
   map[location.hash] = document.body.scrollTop;
  } else {
   var timer = null;
   timer = setInterval(function(){
    if (document.body.scrollTop == map[location.hash]) {
     clearInterval(timer);
    } else {
     document.body.scrollTop = map[location.hash];
    }
   }, 20);
  }
 }

到那边实在已经差不离完结了, 重返恢复生机滚动条地方的作用,
而下边包车型大巴代码需求越多的优化,

切切实实代码见:品类地址

以上就是本文的全体内容,希望对大家的求学抱有援助,也意在我们多多支持脚本之家。

你或然感兴趣的稿子:

  • vue-scroller记录滚动地点的示范代码
  • vue
    scroller再次回到页面记住滚动地点的实例代码
  • 详解使用vue-router进行页面切换时滚动条地点与滚动监听事件
  • vue监听滚动事件完成滚动监听
  • vue通过滚动行为完结从列表到实际情况,再次来到列表原来的地点置的方法

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有