M聊天登录界面解析

功能清单

/page/login.vue

1、用户名

2、密码

3、登录

重点难点

1、理解函数节流 2、函数节流的用法

函数节流

为什么要用函数节流，因为监听屏幕变化的时候会触发多次，所以得运用函数节流保证只执行一次;首先定义timer，如果之前的定时器还存在就清除，返回一个新的函数;

/assets/js/util.js

  export function debounce(func, delay) {
  let timer = null;
  // 返回一个新的函数
  return function (...args) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

函数节流的用法

200毫秒之后执行resize函数

/pages/login.vue
onresize() {
        let innerHeight = window.innerHeight;
        window.addEventListener("resize", debounce(() => {
          let thisInner = window.innerHeight;
          if (innerHeight - thisInner > 50) {
            console.log('aaa')
            setTimeout(() => {
              this.$refs.login.style.top = "-50px";
            }, 20);
          } else {
            this.$refs.login.style.top = "0px";
          }
        },200));
      }

移动端（微信）访问

app下载

微信扫码之后请选择在浏览器打开，更好体验请选择下载app体验

项目概况