<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        vue返回上一頁面時回到原先滾動的位置的方法

        來源:懂視網 責編:小采 時間:2020-11-27 22:02:28
        文檔

        vue返回上一頁面時回到原先滾動的位置的方法

        vue返回上一頁面時回到原先滾動的位置的方法:項目結束,測試時發現在首頁商品列表中,向上滑動幾頁后點擊進入詳情,從詳情頁面返回商品列表時,頁面回到了最頂部,測試不通過說是用戶體驗不好,要求從哪里點擊進去返回該頁面時回到原先的滾動頁面。 思路:因為vue是單頁面應用,進入其他頁面時會銷毀該頁
        推薦度:
        導讀vue返回上一頁面時回到原先滾動的位置的方法:項目結束,測試時發現在首頁商品列表中,向上滑動幾頁后點擊進入詳情,從詳情頁面返回商品列表時,頁面回到了最頂部,測試不通過說是用戶體驗不好,要求從哪里點擊進去返回該頁面時回到原先的滾動頁面。 思路:因為vue是單頁面應用,進入其他頁面時會銷毀該頁

        項目結束,測試時發現在首頁商品列表中,向上滑動幾頁后點擊進入詳情,從詳情頁面返回商品列表時,頁面回到了最頂部,測試不通過說是用戶體驗不好,要求從哪里點擊進去返回該頁面時回到原先的滾動頁面。
        思路:因為vue是單頁面應用,進入其他頁面時會銷毀該頁面,用keep-alive不讓其刷新,具體實現為:

        (1).在App.vue中加入:

        <template>
         <div id="app">
         <!--<router-view/>-->
         <!--頁面返回不刷新-->
         <keep-alive>
         <router-view v-if="$route.meta.keepAlive"></router-view>
         </keep-alive>
         <router-view v-if="!$route.meta.keepAlive"></router-view>
         </div>
        </template>
        

        (2).index.js頁面

        export default new Router({
         routes: [{
         path: '/',
         name: 'index',
         component: index,
         meta: {
         keepAlive: true
         }
         },
        

        這樣在index.vue中,mounted方發只走一次,在瀏覽器上實現了返回原來滾動位置的目的。但是在手機上測試,發現沒用,解決手機上實現目的的方法:

        //在頁面離開時記錄滾動位置
        beforeRouteLeave (to, from, next) {
         this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
         next()
         },
        
        //進入該頁面時,用之前保存的滾動位置賦值
        beforeRouteEnter (to, from, next) {
         next(vm => {
         document.body.scrollTop = vm.scrollTop
         })
         },
        
        

        OK!實現!!

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        vue返回上一頁面時回到原先滾動的位置的方法

        vue返回上一頁面時回到原先滾動的位置的方法:項目結束,測試時發現在首頁商品列表中,向上滑動幾頁后點擊進入詳情,從詳情頁面返回商品列表時,頁面回到了最頂部,測試不通過說是用戶體驗不好,要求從哪里點擊進去返回該頁面時回到原先的滾動頁面。 思路:因為vue是單頁面應用,進入其他頁面時會銷毀該頁
        推薦度:
        標簽: 位置 方法 VUE
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 亚洲一卡2卡3卡4卡国产网站| 久久精品国产精品亚洲艾草网| 国产成人免费爽爽爽视频| 无码国产精品一区二区免费I6| 日本最新免费不卡二区在线| heyzo亚洲精品日韩| 国产精品亚洲A∨天堂不卡| 亚洲人成人77777在线播放| 视频免费1区二区三区| 中文字幕无线码中文字幕免费| 国产成人精品免费大全| 57pao一国产成视频永久免费| 成人免费无码大片a毛片软件 | 青青视频免费在线| 99久久免费观看| 青草草在线视频永久免费| 黑人精品videos亚洲人| 午夜网站在线观看免费完整高清观看 | 美女视频黄免费亚洲| 无遮挡国产高潮视频免费观看 | 国产免费小视频在线观看| 久久久久亚洲av无码尤物| 国产亚洲精品第一综合| 黄色免费网站网址| 亚洲色婷婷六月亚洲婷婷6月| 亚洲国产激情在线一区| 亚洲a一级免费视频| 亚洲人成电影在线观看网| 日韩免费三级电影| A国产一区二区免费入口| 免费毛片在线看片免费丝瓜视频| 午夜亚洲WWW湿好爽| 欧美好看的免费电影在线观看| 国产精品亚洲精品久久精品| 无码人妻一区二区三区免费 | 亚洲AV无码一区东京热久久 | 亚洲大尺度无码专区尤物| 国产免费伦精品一区二区三区| 亚洲国产成人私人影院| 最近中文字幕大全免费版在线| 又粗又黄又猛又爽大片免费|