vue滚动条若干问题

一、页面跳转后，滚动轴回顶部

在methods中，设定方法获取滚动轴

methods:{
    scrolHandle() {
      // 滚动轴距离顶部位置
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 当前页面
      let windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      // 滚动列表
      let listHeight = this.$el.querySelector(".nav").clientHeight;
      console.log(scrollTop, windowHeight, listHeight, "height11111");
      if (-(-scrollTop - windowHeight-1) > listHeight) {
        // this.loadDate1();
        Toast("更新数据完成");
      }
	},
}

在mounted中，监听滚动轴高度，并调用设定方法，离开后执行destroyed

  mounted() {
    //监听滚动轴高度
    window.addEventListener("scroll", this.scrolHandle);
  },
  destroyed() {
  	//销毁监听
    window.removeEventListener("scroll", this.scrolHandle);
  },

使用vue-router，在main.js中定义滚动轴事件

// 路由跳转后页面回顶部
router.afterEach(()=>{
  document.body.scrollTop=0;
  document.documentElement.scrollTop=0;
})

二、解决移动端输入法，固定定位位置改变

设置两个屏幕高度，一个原始高度，一个改变后的

  data() {
    return {
      // 原始屏幕高度
      oWindowHeight:document.documentElement.clientHeight || document.body.clientHeight,
      // 变化后高度
      oWindowH:document.documentElement.clientHeight || document.body.clientHeight,
    };
  },

页面加载时获取一个高度

  mounted() {
    // 监听屏幕原高度
    window.onresize = () =>
      (() => {
        this.oWindowH =
          document.documentElement.clientHeight || document.body.clientHeight;
        console.log(this.oWindowH, "this.oWindowH");
      })();
  },

针对页面高度做监听，如果新高度大于改变后的高度，输出想要的值，然后对底部定位做隐藏

  watch: {
    //监听屏幕高度变化
    oWindowH() {
      if (this.oWindowHeight > this.oWindowH) {
        this.showLocal = false;
        console.log("chang0000");
      } else {
        this.showLocal = true;
        console.log("chang1111");
      }
    },
  },