ホームページ > ウェブフロントエンド > jsチュートリアル > vue-scroller でスクロール位置をマークして記録する方法

vue-scroller でスクロール位置をマークして記録する方法

亚连
リリース: 2018-06-11 15:58:16
オリジナル
2638 人が閲覧しました

本篇文章主要介绍了vue-scroller记录滚动位置的示例代码,现在分享给大家,也给大家做个参考。

问题描述:

列表页进入详情页,或者tab页切换,然后再返回列表页,希望能切换到之前滚动位置

解决问题思路:

切换到其他页面前记录位置,返回列表页的时候返回位置。这就需要借助vue-router的beforeRouteEnter和beforeRouteLeave这两个钩子去实现.

还有一种更简单粗暴的方法, vue-scroller.min.js源码中添加宽高不为零判断,实现方式见评论,是最近代码优化的时候发现的。

代码部分:

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()

},
ログイン後にコピー

需要注意的点:

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

2.beforeRouteEnter的时候,是无法通过this去访问vue实例的,需要借助于vm

3.setTimeout 0 的使用

等下周发版的时候,我贴上链接,可以体验下效果

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在vue.js中实现分页中单击页码更换页面内容

在vue2.0组件中如何实现传值、通信

webpack 4.0.0-beta.0版本新特性(详细教程)

利用SpringMVC解决vue跨域请求

Vue组件和Route的生命周期(详细教程)

在Vue2.0中实现用户权限控制

以上がvue-scroller でスクロール位置をマークして記録する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート