在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'))
          }
        })
      })
    }

 

 

转载于:https://www.cnblogs.com/qdlhj/p/11166187.html