vue跳转其他页面再跳回原页面记录滚动的位置

最新推荐文章于 2023-03-07 19:32:37 发布

牛先森家的牛奶

最新推荐文章于 2023-03-07 19:32:37 发布

阅读量896

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_42681295/article/details/113094102

版权

Vue 专栏收录该内容

120 篇文章 5 订阅

订阅专栏

vue 跳转其他页面再跳回原页面记录滚动的位置

此方法使用当页面存在滚动条，当跳转其他页面，再跳转到此页面时，保存当前的位置；

前提必须给组件设置 keep-alive

<div class="shop-list" ref="shopList" >
    <div class="page_swiper">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>
                <a href="">1</a>
            </van-swipe-item>
            <van-swipe-item>
                <a href="">2</a>
            </van-swipe-item>
            <van-swipe-item>
                <a href="">3</a>
            </van-swipe-item>
            <van-swipe-item>
                <a href="">4</a>
            </van-swipe-item>
        </van-swipe>
    </div>
    
    <!-- 封装提取部分  商品 -->
    <tabShopList :searchKey="searchKey" :isTabFixed="isTabFixed"></tabShopList>
</div>

注意 shopList 是有滚动效果的

 	beforeRouteLeave (to, from, next) {
 		// 记录 滚动的高度 this.$refs.shopList.scrollTop 其中shopList 是滚动的元素
        sessionStorage.shopAskPositon= this.$refs.shopList.scrollTop
        next();
    },
    beforeRouteEnter (to, from, next) {
        console.log(from)
        if (!sessionStorage.shopAskPositon|| from.name !== 'tradeDetail') {
            //当前页面刷新不需要切换位置 或者通过form来判断
            sessionStorage.shopAskPositon= 0;
            // 下面可以操作此页面中data的值和方法
            next(vm => {
                vm.isTabFixed = false
            });
        } else {
            next(vm => {
                if (vm && vm.$refs.shopList) {
                //通过vm实例访问this
                setTimeout(function() {
                    vm.$refs.shopList.scrollTo(0, sessionStorage.shopAskPositon, false);
                }, 0); //同步转异步操作
                }
            });
        }
    },