在vue中利用$ref 设置scrollTop失效

运用场景:在列表中选择项目跳转到下一个页面详情,重新返回这个页面的时候,需要滚动到之前的位置。

解决方法:

点击跳转的时候,把页面滚动的位置存在session里面,再次进来的时候,为容器赋值,,发现不管怎么设置

 

this.$refs.content.scrollTop的值都为0,后面f放在nextTick方法里面执行并放在mounted,发现当后端数据速度比较忙时,也会失效,因为数据是异步请求,真正获取数据不是在mounted。后面把nextTick放在数据请求成功后执行,成功解决问题,最终解决方案如下
  methods: {
    //获取项目列表
    getGamePlansList() {
      gamePlansBySportCode({ 
        sportCode: this.queryData.sportCode, 
        startDate: this.dateValue
      }).then(res => {
        this.$vux.loading.show()
        if(JSON.stringify(res.data) !== "{}") {
          this.project = res.data
          this.isData = true
        } else {
          this.isData = false
        }
        // 从详情回来的滚动条返回到上一次
        this.$nextTick(() => {
          this.$vux.loading.hide()
          if(this.$utils.getSession('scrollTop')) {
            this.$refs.content.scrollBy(0, this.$utils.getSession('scrollTop'))
          }
        })
      })
    }
 

 

posted @ 2019-07-10 20:05  心向阳  阅读(10452)  评论(0编辑  收藏  举报