zoukankan      html  css  js  c++  java
  • 定位问题 vue+element-ui+easyui(兼容性)

    项目背景:靠近浏览器窗口的各个方向(左上、下、左、右)都有不同的模态框悬浮于窗口,这里针对于底部组件定位的选择(主要针对pc端垂直方向上的定位)

    1、百分比:easyui的window窗口定位方式:设置left和top的值即可;(left可直接写指定值px;top不能写px,因为各个分辨率下的浏览器窗口距离上面的值是不固定的。考虑到此top值写成百分数,原以为百分数可以解决此问题了,结果在不同屏幕大小的浏览器窗口中依然有细微差距)

    2、js:easyui的window窗口只能设置left和top的值,然而top值不好设置,于是想到使用js获取当前浏览器窗口的可见高度,再使用该高度减去操作元素的高度,不就能具体定位垂直方向上的位置了?

    created() {
      var bodyheight = Number(document.body.clientHeight); //浏览器可见窗口的高度
    var bodywidth = Number(document.body.clientWidth);//浏览器可见窗口的宽度
      console.log(bodyheight);
    //this.win.top=bodyheight-60;(60为被操作组件的高度)
    },

    用以上方法确实可以做到垂直方向上的指定定位,且兼容pc端不同屏幕大小。但是新的问题出现:
    当改变当前浏览器窗口大小时,使用该方法实现定位的组件位置偏移得离谱,需要刷新当前窗口,才能恢复到正常状态!(效果达到了,但是用户体验极差,这样肯定不行)

    3、使用定位:position:fixed/absolute;设置bottom的值,且使用px作为单位,解决了不同大小屏幕的准确定位以及不用二次刷新的问题!

    没有人能一路单纯到底,但是要记住,别忘了最初的自己!
  • 相关阅读:
    iOS 与 惯性滚动
    前端性能优化--为什么DOM操作慢?
    React虚拟DOM浅析
    DOM性能瓶颈与Javascript性能优化
    React 组件性能优化
    重绘与回流——影响浏览器加载速度
    移动前端开发之viewport的深入理解
    [转] 前后端分离开发模式的 mock 平台预研
    [Unity3D]Unity3D游戏开发之Lua与游戏的不解之缘终结篇:UniLua热更新全然解读
    关联规则( Association Rules)之频繁模式树(FP-Tree)
  • 原文地址:https://www.cnblogs.com/LindaBlog/p/11158870.html
Copyright © 2011-2022 走看看