vue根据屏幕大小适配表格高度

像这种效果，不论切换大小屏幕都要让页码直接在底部显示，不要出现外侧的滚动条，只要滚动内部表格就可以

思路：在页面初始化的时候，要获取当前屏幕的高度减去顶部其他部分的固定高度，设置表格的高度，然后在mounted钩子里设置当屏幕切换时，重新获取屏幕高度，再重新赋值渲染页面就ok!

上代码：

html:

data数据定义：

钩子函数：

created() {  this.getUsers();     let screenHeight = document.documentElement.clientHeight - 258 + "px";this.$nextTick(() => {this.Height = screenHeight;})
},

mounted() {const that = this;window.onresize = () => {return (() => {let screenHeight = document.documentElement.clientHeight - 258 + "px";that.Height = screenHeight;})()}
}

这样就ok了，大小屏幕任意切换都是这个样

vue根据屏幕大小适配表格高度相关推荐

android学习笔记---49_屏幕适配，根据不同手机屏幕大小适配软件界面
2013/5/12 49_屏幕适配 ----------------------- 1.根据手机屏幕的大小自动显示软件界面的大小 2.这里用480x320和320x240这两种屏幕大小举例. ---- ...
vue获取屏幕的实时宽度 / 高度
mounted () {const that = this;window.onresize = () => {return (() => {window.screenWidth = doc ...
android大屏适配_Android屏幕大小适配问题解决
严格来说,作为读者,你应该带着批判性质的眼光来看这篇文章,此文章依据本人对Android官方开发资料<Supporting Multiple Screens>的阅读.实践以及和开发人员的沟 ...
Android屏幕大小适配问题解决
一.一些基本概念 1.长度(真实长度):英寸.inch 2.分辨率:density 每英寸像素数 dpi(密度) 3.像素:px 4.dip的公式:px /dip=dpi/160 所以 dip ...
html页面一个屏幕大小不一样,关于web页自动适配屏幕大小
一.先了解下html5的viewport使用随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的 ...
Android根据屏幕大小动态适配GridView
前言: 最近有个需求上面有图片,下面是个类似九宫格的列表,列表下面还有文字,刚开始只有3列还可以布满,后面改了需求有4列,在小屏手机就没有铺满,第4列看不到了,修改图片和文字长宽也没适配,后面想到利用 ...
vue适配不同屏幕大小_Cocos creator面试题屏幕适配的3个小技巧
引言 cocos creator是什么? Cocos Creator 是触控科技旗下的产品,以内容创作为核心的游戏开发工具,在 Cocos2d-x 基础上实现了彻底脚本化.组件化和数据驱动等特点. 屏 ...
手机浏览器客户端交互设计适配之——屏幕大小
以下内容来自于淘宝UED 随着各个手机操作系统的应用平台的上线,几乎所有的互联网应用都在往手机上迁移.然而手机与PC 不一样,PC经过了多年的发展,在设计上形成了很多不成文的规则,如网页的宽度都在96 ...
客户端交互设计适配之——屏幕大小
from:http://ued.taobao.com/blog/2011/03/04/mobile-app-design-based-on-screen-sizes/ 随着各个手机操作系统的应用平台的 ...

vue根据屏幕大小适配表格高度

vue根据屏幕大小适配表格高度相关推荐

最新文章

热门文章