vant list組件滾動保留滾動條位置
更新時間：2021年09月13日 11:19:57 作者：牛先森家的牛奶
這篇文章主要介紹了vant list組件滾動保留滾動條位置，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
vant list組件滾動保留滾動條位置，需結合keepAlive使用，分享此篇，供大家參考。
1、保存位置的前提是用的keepAlive組件來做緩存，app.vue代碼
<template>
<div id="app">
<keep-alive>
<router-view v-if='$route.meta.keepAlive'/>
</keep-alive>
<router-view v-if='!$route.meta.keepAlive'/>
</div>
</template>
2、在路由文件router.js，給每個路由meta添加scrollTop和keepAlive
{
path: '/home',
name: 'home',
component: resolve => require(['@/views/home/index.vue'], resolve),
meta: {
title: '首頁',
index: 1,
keepAlive: true,
scrollTop: 0
}
},
{
path: '/classify',
name: 'classify',
component: resolve => require(['@/views/classify/index.vue'], resolve),
meta: {
title: '分類',
index: 1,
keepAlive: true,
scrollTop: 0
}
},
{
path: '/shopping',
name: 'shopping',
component: resolve => require(['@/views/shopping/index.vue'], resolve),
meta: {
title: '購物車',
index: 1,
keepAlive: true,
scrollTop: 0
}
},
{
path: '/detail',
name: 'detail',
component: resolve => require(['@/views/detail/index.vue'], resolve),
meta: {
title: '詳情',
index: 2,
// keepAlive: true,
// scrollTop: 0
}
},
3、然后在main.js,記錄滾動條的位置
router.beforeEach((to, from, next) => {
if (from.meta.keepAlive) {
const $wrapper = document.querySelector('.app-wrapper'); // 列表的外層容器 注意找到滾動的盒子
const scrollTop = $wrapper ? $wrapper.scrollTop : 0;
console.log('scrollTop=', scrollTop)
from.meta.scrollTop = scrollTop;
}
next();
});
4、最后在需要記錄保留滾動條位置的地方獲取通過activated（這個函數每次進入頁面都會執(zhí)行，只有結合使用keepAlive組件才有效）來獲取scrollTop
activated () {
const scrollTop = this.$route.meta.scrollTop;
const $wrapper = document.querySelector('.app-wrapper');
if (scrollTop && $wrapper) {
$wrapper.scrollTop = scrollTop;
}
},
比如緩存了某些頁面也不想隨之滾動，則把scrollTop置0即可；
activated() {
const $wrapper = document.querySelector(".app-wrapper");
$wrapper.scrollTop = 0;
},
注意，頁面滾動的話，其他頁面有滾動條的也會隨之滾動，可以對其他頁面里面處理，或者判斷是否從詳情頁到列表頁來判斷是否緩存位置，如果不是，則回到頂部，但是注意路由鉤子函數this的使用；
相關文章
vue3.0 CLI - 2.3 - 組件 home.vue 中學習指令和綁定
這篇文章主要介紹了vue3.0 CLI - 2.3 - 組件 home.vue 中學習指令和綁定的相關知識，本文通過實例代碼相結合的形式給大家介紹的非常詳細 ,需要的朋友可以參考下2018-09-09
本文主要介紹了element?tab標簽管理路由頁面的項目實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了vue.js編譯時給生成的文件增加版本號，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
下面小編就為大家分享一篇Vue父組件調用子組件事件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue Element前端應用開發(fā)之常規(guī)的JS處理函數
在我們使用Vue Element處理界面的時候，往往碰到需要利用JS集合處理的各種方法，如Filter、Map、reduce等方法，也可以涉及到一些對象屬性賦值等常規(guī)的處理或者遞歸的處理方法，本篇隨筆列出一些在VUE+Element 前端開發(fā)中經常碰到的JS處理場景，供參考學習。2021-05-05
Ruoyi-Vue處理跨域問題同時請求多個域名接口(前端處理方法)
跨域問題一直都是很多人比較困擾的問題,這篇文章主要給大家介紹了關于Ruoyi-Vue處理跨域問題同時請求多個域名接口的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-05-05
使用vue的v-for生成table并給table加上序號的實例代碼
這篇文章主要介紹了使用vue的v-for生成table并給table加上序號的相關資料,需要的朋友可以參考下2017-10-10
本文給大家分享Vue.js實現實例搜索應用功能詳細代碼，非常不錯，感興趣的朋友參考下吧2017-08-08
vue2.0 使用element-ui里的upload組件實現圖片預覽效果方法
今天小編就為大家分享一篇vue2.0 使用element-ui里的upload組件實現圖片預覽效果方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
axios請求頭設置常見Content-Type和對應參數的處理方式
這篇文章主要介紹了axios請求頭設置常見Content-Type和對應參數的處理方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03