javascript - 单页面应用,页面跳转后,返回后,回到当前位置?

 爱我独自等待_白兔窝2013 发布于 2022-11-12 16:01

业务场景:用vue.js开发单页面应用,当滚动到页面a底部时,点击跳转到下一个页面b,再按返回,页面还是停留在页面a的底部,怎样做?

10 个回答
  • 其实你把b做成a的子组件就可以了。

    这样子a不会进入销毁状态。
    具体形如:

    <p name="list" v-bind:show="show=='list'">
      <ul>
        <li v-for="item in list">{{item.html}}</li>
      </ul>
    </p>
    <p name="detail" v-bind:show="show=='detail'">
      <b-component v-bind:data="current"></b-component>
    </p>
    2022-11-12 16:01 回答
  • 刚巧做个这个,贴一下我已的一个方案。

    整个应用是基于 VUE + WEBPACK
    使用了VUE-ROUTER + VUEX

    VUE-ROUTER 自身会有栅格钩子函数 data , activate ,deactivate

    当A->B时,记录A中你的列表位置(列表数据是VUEX中的,“.forum-infinite-scroll” 用来定位你的列表)

    deactivate ({to, next}) {
      this.pos = $(this.$el).find('.forum-infinite-scroll').offset()
      next()
    }

    当B->A时,移动到原位置

    deactivate ({to, next}) {
      this.pos = $(this.$el).find('.forum-infinite-scroll').offset()
      if (this.pos && this.pos.top < 0) {
        let scroller = $(this.$el).find('.infinite-scroll-bottom')
        setTimeout(()=>{
          this.$nextTick(function () {
            $.refreshScroller()
            scroller.scrollTop(Math.abs(this.pos.top) + 250)
          })
        }, 500)
      }
      next()
    }

    这里有几个地方需要注意,
    一是 this.$nextTick
    二是 $.refreshScroller()
    缺一不可

    2022-11-12 16:01 回答
  • 点击返回的时清除之前的scrollHeight

    2022-11-12 16:01 回答
  • 销毁前获取活动位置
    下次进来滚动到相应位置

    2022-11-12 16:01 回答
  • 没用过vue,不过我觉得这种状况你应该不能用vue的返回方法,而是重新进入这个页面,这样页面会刷新,就重新回到顶部了。

    2022-11-12 16:01 回答
  • scrollHeight 存下来, 进入的时候再去设置scrollHeight 。。

    2022-11-12 16:01 回答
  • 没用过vue。
    可以在b页面跳转到a页面来重置,不要使用默认的返回。

    2022-11-12 16:01 回答
  • 试试vue-router中的saveScrollPosition

    2022-11-12 16:01 回答
  • 没用过vue,不过一般router都会提供一个location改变时的hook,我想是不是可以在这绑定一个函数,里面将scroll重置到最顶上

    2022-11-12 16:01 回答
  • **以上答案全部作废;哈哈,狂不?**
    
    返回的话,如果前面是个带图列表页,无论怎么返回,都会重载入该列表视图;
    也就是说;图片没完全载入的情况下,即便你做了scrollHeight或者scrollTOP,
    都无法滚动到指定位置,因为html本身都没有那么长;
    
    **在下angularjs写过一个瀑布流的MALL,就这返回并定位到位置的门槛高到直接挡脸的高度;**
    好啦:我当初的解决方案,其实相当简单;A页 - B页这样的话,其实A页和B页是一个视图;
    1,当初做的B页是直接接到A页瀑布流的底部;
    2,禁用瀑布流;同时记录_ScrollTop到controller;
    3,吧瀑布流height:0;
    -,返回就是把B页隐藏;(用作复用);
    5,瀑布HEIGHT:AUTO;
    6,你返回了;
    
    差不多就这样,偷懒的方法;( ̄▽ ̄)";
    **只要跳视图了,基本触发重载;
    所以,就不能触发重载咯**;AB就是一个视图里面了;
    2022-11-12 16:01 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有