vue项目中利用锁控制页面响应式布局

Posted 左直拳

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目中利用锁控制页面响应式布局相关的知识,希望对你有一定的参考价值。

响应式布局,就是页面布局跟随屏幕分辨率自动变化。响应式布局跟自适应布局不一样。自适应布局就是用百分比来定义页面内各布局元素,在屏幕分辨率发生变化时,不至于错位。而响应式布局更强一些,其布局会跟随屏幕分辨率不同而不同。比如高分辨率,可能每行有5个方块;分辨率低一点,就变成了每行3个,原先的一行变成了2行。

单单布局变化没啥,绑定window.resize事件,然后做一些处理就完了,甚至都不用js,只通过css也可以。但如果布局变化,同时也关联到数据产生变化,就复杂一些了。比如,有个列表页,每一页记录数是20条。分辨率低一些,动态调整为15条;或者高一些,动态调整为25条。总之分辨率变化,会导致向后台请求数据。假如只是设置浏览器的分辨率来测试,没什么问题;但假如是用鼠标来拉伸或缩小窗口就麻烦了,这个时候会不断产生window.resize事件,从而不断的请求后台数据,系统压力陡然增大。

这种情况,使用定时器来控制的话,一来比较复杂,二来效果不佳。可以考虑用锁来控制。当触发window.resize事件时,检测有无上锁,有的话就返回,不做任何处理;没有的话上锁,然后向后台请求数据。请求数据是一个异步方法,在返回数据时,释放锁。这样就过滤了相当部分的请求,并将这些数据请求串行化。

具体代码如下:

import  defineComponent  from "vue";
import * as tools from "@/utils";
import getDataList from "@/api/db";

const lockObj = new tools.LockHandler();//构造一把锁
export default defineComponent(
  setup() 
    const search = (params, callback) => //获取数据
       getDataList(params)
       .then((res) => 
       	 。。。
         if (callback) callback();//执行回调函数,锁将在回调函数中释放
       )
       .catch((err) => 
         console.error(err);
       );
    ;

    return 
      search,
    ;
  ,
  mounted() 
    const that = this;
    window.onresize = () => 
      if (!lockObj.isLock()) //如果没有上锁
      
        lockObj.lock();//上锁
        
        //注意第2个参数是获取数据后的回调函数
        that.search(null, () => 
          lockObj.unLock();
        );
      
    ;

    this.search();
  ,
);

锁是一个类,代码如下:

//src/utils/index.js
export class LockHandler 
  #_lock;
  constructor() 
    this.#_lock = false;
  

  isLock = () => 
    return this.#_lock;
  ;
  lock = () => 
    this.#_lock = true;
  ;
  unLock = () => 
    this.#_lock = false;
  ;

以上是关于vue项目中利用锁控制页面响应式布局的主要内容,如果未能解决你的问题,请参考以下文章

vue项目中利用锁控制页面响应式布局

流式布局和响应式布局

VueVue 项目前端响应式布局及框架搭建

适配布局类型

Vue大屏自适应--响应式盒子

自适应和响应式区别以及写法