<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
        主站蜘蛛池模板: 国产精品国产午夜免费福利看 | 91高清免费国产自产拍2021| 亚洲av无码成人精品区| 色噜噜的亚洲男人的天堂| 午夜一区二区免费视频| 精品亚洲成a人在线观看| 免费中文字幕在线观看| 美女黄频视频大全免费的| 亚洲AV无码乱码在线观看性色扶| mm1313亚洲国产精品无码试看 | 国产精品亚洲αv天堂无码| 一本到卡二卡三卡免费高| 亚洲中久无码永久在线观看同| a级毛片在线免费观看| 亚洲高清免费在线观看| 亚洲人成电影网站免费| 亚洲av乱码一区二区三区按摩| 免费女人18毛片a级毛片视频| a级毛片免费高清视频| 亚洲国产精品热久久| 精品香蕉在线观看免费| 亚洲性无码一区二区三区| 亚洲成a人在线看天堂无码| 久久久免费观成人影院| 亚洲毛片在线观看| 我想看一级毛片免费的| 三年片在线观看免费观看大全中国| 亚洲男人的天堂www| 免费人成在线观看69式小视频| 亚洲一本一道一区二区三区| 亚洲精品无码激情AV| 69国产精品视频免费| 国产亚洲视频在线| 久久国产精品亚洲一区二区| 在线观看视频免费完整版| 免费人成动漫在线播放r18| 亚洲国产人成在线观看69网站| 成人午夜视频免费| 久久成人免费播放网站| 国产精品自拍亚洲| 亚洲视频在线观看免费视频|