vue移动端列表高度计算

已于 2023-07-24 14:27:45 修改
阅读量1k 收藏 4
点赞数 2
文章标签： css 前端 vue.js
于 2022-08-08 21:52:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47190975/article/details/126236756
版权

在做移动端页面的时候经常会遇到以下的布局。红色是顶部头部区,黄色是中部的列表区（可滑动）,底部是tab切换或者是一些其他的东西。在不使用插件的情况下黄色区域滚动应该设置固定高度,然后用overflow:auto去实现一个滚动的效果。

这块黄色区域的高度等于100vh - 红色盒子的高度和绿色盒子的高度。

可以先给红色盒子和绿色盒子分别加一个ref属性。使用ref去获取里面的元素高度。

// 红色盒子高度
const redHeight = this.$refs.redRef.offsetHeight
// 绿色盒子高度
const greenHeight = this.$refs.greenRef.offsetHeight

注意：如果ref绑定的是组件的话,需要写成这样—— this.$refs.redRef.$el.offsetHeight

有了这两个盒子的高度之后使用100vh去减掉这两个盒子的高度之和得出来的就是最终黄色盒子需要的准确高度。

// 红色和绿色盒子之和
this.saleListHeight = redHeight + greenHeight

 使用style动态绑定高度

卯足劲往前冲
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue移动端实现下拉刷新
08-27
在Vue移动端应用中，实现下拉刷新功能是一个常见的需求，特别是在构建可滚动列表或内容区域时。本篇文章将深入探讨如何使用Vue实现这一功能，并通过实际的代码示例帮助你理解其工作原理。 首先，我们需要了解移动端...
vue移动端写的拖拽功能示例代码
10-14
在Vue移动端开发中，实现拖拽功能是一项常见的需求，它能增强用户交互体验。本文将详细解析如何在Vue中创建一个简单的拖拽功能，并提供相关的示例代码。 首先，我们需要了解在移动端和桌面端触控事件的区别。在...
(vue)动态获取容器宽高
nyf_unknow的博客
08-26 2431
【代码】(vue)动态获取容器宽高。
vue div盒子宽高随另一个盒子自适应
细节怪的博客
09-13 2175
两个盒子的高度不固定，且右侧盒子高度随左侧盒子高度变化。
Vue 中获取 DOM 元素的高度
最新发布
qq_44776454的博客
05-28 635
Vue 获取DOM 大小位置 属性
vue中动态使用vh calc设置高度
wzwzwz555的博客
05-12 343
【代码】vue中动态使用vh calc设置高度。
vue里获取ul下全部li元素组成伪数组，转成数组forEach遍历获取每个li的高度
唐都恩了的博客
05-09 5060
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <p v-for="count in 10"...
vue获取某元素高度，v-for循环出来的获取高度或者图片的高度auto
stars______的博客
03-31 913
contant为想获取高度元素class。
vue实现移动端悬浮窗效果
10-17
在Vue实例的`data`选项中，我们定义了一些变量来记录状态，例如`flags`用于标记拖拽状态，`position`存储初始触碰位置，`nx`和`ny`记录了触碰点相对于初始位置的偏移，`dx`和`dy`存储悬浮窗的初始位置，`xPum`和`...
vueScroll实现移动端下拉刷新、上拉加载
10-17
你可以在 `mounted` 生命周期钩子中通过计算获取视口高度并动态设置： ```javascript mounted() { this.getHeight(); }, methods: { getHeight() { const bodyHeight = document.documentElement....
vue实现列表滚动的过渡动画
11-20
总结来说，Vue实现列表滚动过渡动画的关键在于实时计算`startIndex`和`endIndex`，利用`better-scroll`处理滚动事件，`create-keyframe-animation`控制动画，以及在Vue模板中根据这些值来显示或隐藏元素。...
uniapp和vue获取屏幕或盒子内容所宽高
weixin_47640774的博客
01-28 686
（注意：uni.getSystemInfo()方法是一个异步方法，因此你需要在success回调函数中处理获取到的屏幕尺寸数据。.select('.box') // 选择你要获取尺寸的盒子元素，这里假设盒子元素的class为box。console.log('屏幕高度：', screenHeight);
vue 获取元素宽高
热门推荐
lgg1997的博客
07-05 1万+
vue 获取元素宽高
vue动态设置盒子的高度，设置v-for循环出来的盒子的高度
c327127960的博客
08-16 3395
最近有一个功能需求是点击某个循环出来的按钮，使当前点击的这个盒子的高度变高，以显示更多内容 这四个盒子就是后台传来的数据，v-for出来的 问题：如何点击当前盒子中的查看更多按钮，只改变当前盒子的高度，并且不影响其他盒子的高度 方法：1.动态往后台返回的数组中的每一个对象添加一个属性，在mounted里面设置 mounted() { this.machineList.forEach((item) => { //动态向machineList中每个对象添加autoHeight属性
VUE3 获取元素高度
qq_46416934的博客
02-23 9686
<v-header ref="headerRef" /> <v-tags ref="tagsRef"></v-tags> import { ref, reactive, onMounted, watch } from 'vue' setup() { let clientHeight = ref('') //浏览器可视区域高度 const headerRef = ref(null) const tagsRef = ref(null) let slbHeight = r
vue设置列表高度自适应和show-summary的冲突
weixin_44006009的博客
01-07 964
vue设置列表高度自适应和show-summary的冲突
Vue--移动端--随着手指滑动动态设置元素的高度
weixin_45406850的博客
09-29 1453
初始化高度为0，随着手指滑动动态设置元素的高度，有最大限制，且最大限制可以不是一个固定值
vue基于elementui设置表格动态高度的几种方法
weixin_46995731的博客
11-16 6720
vue基于elementui设置表格动态高度的几种方法 方法一 css + js的形式 这个方法需要在表格外层设置一个div，原理是将表格的高度设置成外层div的高度，所以外层的div需要使用calc来设置高度，然后给表格设置:height="tableH"的属性 <div class="table-wrapper" ref="tableWrapper" v-loading="loading"> <el-table :data="tableData" stripe style="width
vue移动端怎么设置页面高度_vue移动端屏幕适配详解
06-06
对于移动端页面，我们通常使用vw（视窗宽度）和vh（视窗高度）来设置元素的尺寸，以适配不同的屏幕大小。同时，我们也需要设置页面的高度，以保证页面内容完整显示，并且在滚动时能够正常展示。 下面是一些设置页面高度的方法： 1. 使用CSS样式设置页面高度，例如： ```css html, body { height: 100%; } ``` 2. 使用JavaScript动态设置页面高度，例如： ```javascript document.documentElement.style.height = window.innerHeight + 'px'; ``` 3. 使用第三方库，例如viewport-units-buggyfill，它可以解决vw和vh在某些浏览器中不兼容的问题，并自动计算页面高度。 总之，设置页面高度需要考虑到屏幕适配和浏览器兼容性等因素，可以选择合适的方法进行设置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值