ページに戻ってスクロール位置を記憶するために Vue でスクローラーを実装する方法

この記事では、スクロール位置を記憶するためにページを返す vue スクローラーのサンプル コードを主に紹介します。これは非常に優れており、必要な友人は参照できます

1、keepAlive を設定します: キャッシュするかどうか

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

2、レンダリングページを設定します

app.vue

<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

3、スクロール位置を記録し、値を割り当てます

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

上記は、私が皆さんのためにまとめたものです。皆さんのお役に立てれば幸いです。将来。

関連記事:

Elementuiでデフォルトのスタイル変更を実装する方法

Angularのng-alainに基づいて独自の選択コンポーネントを定義するにはどうすればよいですか?

要素 UI の構築方法 (詳細なチュートリアル)

以上がページに戻ってスクロール位置を記憶するために Vue でスクローラーを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。