何良平
  • 3
  • 新人请关照

vue做的app返回上一页取消滚动条置顶?使用keep-alive遇到了困难?

问题描述

vue开发app返回上一页滚动条位置置顶了

代码如下,首先用keep-alive标签包住:

<template>
  <div id="app">
    <div style="opacity: 0;position: absolute;z-index: -1">
      <audio id="hg-msg-play" paused="paused" controls="controls">
        <source :src="sound" type="audio/mp3" />
      </audio>
      <span id="hg-play-box">播放</span>
    </div>
    <transition :name="$store.state.tabDirection"> 动态获得transition 的name值
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </transition>
  </div>
</template>

跳转出去跟回来:

   activated(){
      console.log('回来了')
      document.documentElement.scrollTop=200
      console.log(document.documentElement.scrollTop)
    },
    methods: {
      // //根据路径跳转下个页面
      afterMe(ev,url){
        this.$router.push(url)
      },

浏览器输出:
QQ图片20191211105410.png

这里都设定成功了,滚动条还在最上面
返回后手机画面滚动条还是在最上面,如何解决啊卡了6个小时了

阅读 146
评论 2019-12-11 提问
    3 个回答
    何良平
    • 3
    • 新人请关照

    改好了,将keep-alive外面的transition给去掉就可以了

    评论 赞赏 2019-12-11

      可以用this.$nextTick(() => { document.documentElement.scrollTop=200 }) 或者`setTimeout(() => {
      document.documentElement.scrollTop=200 }, 1000)`试一下先。

      评论 赞赏 2019-12-11
        py1568
        • 1
        • 新人请关照

        需要在离开的时候存起来,返回再设置
        activated(){

        this.$nextTick(() => {
            this.$refs.bbsList.scrollTop = this.listTop;
        });

        },
        deactivated() {

        this.listTop = this.$refs.bbsList.scrollTop;

        },

        评论 赞赏 2019-12-11
          撰写回答

          登录后参与交流、获取后续更新提醒