【小知识点汇总】-优快云博客

本文链接：https://blog.youkuaiyun.com/Qing_0124/article/details/124194102

这篇博客介绍了Vue中动态获取页面宽高的方法，以及如何处理Vue的proxy对象进行数据传递。同时，讲解了定时器与计时器的区别和用法，并展示了监听页面滚动高度的实现。此外，还详细说明了如何使用flex布局来实现每行固定数量的项目展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.vue动态获取页面宽高

windowWidth: document.documentElement.clientWidth, //实时屏幕宽度

windowHeight: document.documentElement.clientHeight, //实时屏幕高度

--超出指定高度隐藏可滑动 max-height: 650px;overflow-y: scroll;

2.vue数据传递proxy对象处理(json序列化)

let arr=JSON.parse(JSON.stringify(this.tableData))

console.log(arr.tableData) ----this.tableData为要序列化的proxy对象

3.计时器与定时器

定时器（会按照指定时间循环执行至手动停止，使用clearInterval销毁计时器）：setInterval()

计时器（会在指定延迟时间后执行一次）：setTimeout（）

4.监听页面滚动（高度）

//获取页面滚动高度
methods:{
      scrollHandle(e){
      let top = e.srcElement.scrollingElement.scrollTop;    // 获取页面滚动高度
      console.log(top);
        }
}
//钩子函数里为window添加事件
mounted(){
          window.addEventListener('scroll',this.scrollHandle);//绑定页面滚动事件
 },

5.flex布局(每行项目数)

.btn {
    padding: 10px 40px 20px;
    display: flex;
    // justify-content: space-around;
    justify-content: flex-start;
    flex-wrap: wrap;
    .vanbutton {
      margin: 0 5px 5px 0;
      width: calc(
        (100% - 10px) / 2
      ); // 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
      min-width: calc((100% - 10px) / 2); // 加入这两个后每个item的宽度就生效了
      max-width: calc((100% - 10px) / 2); // 加入这两个后每个item的宽度就生效了
    }
  }

ps:btn为容器类名,
   vanbutton为项目类名,
   /几取决于一行放多少个,

6.h5自动适配满屏

父级盒子
css：{
  height: 100vh;
  display: flex;
  flex-direction: column;
}

子级盒子 -- 需要自适应容器
css:{
  overflow: auto; /* 启用滚动功能 */
  -ms-overflow-style: none; /* 适用于 Internet Explorer 和旧版 Edge */
  scrollbar-width: none; /* 适用于 Firefox */

  width: 100%;
  min-height: 88vh;
  flex: 1;
}

非自适应子级盒子
css:{
  height: auto;
}