zoukankan      html  css  js  c++  java
  • 在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'))
              }
            })
          })
        }
     
  • 相关阅读:
    Eclipse给方法添加注释
    隐式等待和显示等待和固定等待
    用例执行完后切换到指定的页面
    HTTP常见响应状态码
    Java类初始化顺序问题
    博客园!我来了
    MySQL的存储引擎
    String声明为NULL和""的区别
    Mysql入门
    MySQL查询与结构
  • 原文地址:https://www.cnblogs.com/qdlhj/p/11166187.html
Copyright © 2011-2022 走看看