uniapp元素距离顶部距离方法

最新推荐文章于 2023-12-01 10:43:01 发布
最新推荐文章于 2023-12-01 10:43:01 发布
阅读量2k 收藏 2
点赞数 2
分类专栏： uniapp 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Guoyu1_/article/details/124589727
版权
本文探讨了如何在Vue.js应用中计算视口高度，并根据计算结果动态调整内容区域的高度，以实现内容与视口的完美适配。通过使用`mounted`生命周期钩子和`uni.createSelectorQuery`进行DOM查询，实现了获取内容区域顶部距离并计算适应高度的功能。
摘要由CSDN通过智能技术生成

     <view class="content" :style="{height: heightMax}"></view>

		computed: {
			heightMax(){
				return 'calc(100vh - '+this.h + 'px'+')'
			}
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.content').boundingClientRect((data) => {
				this.h = data.top+69
			}).exec();
		},

前端路上迷茫的小鲨鱼
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uni-app怎么获取view距离顶部的高度
青阳的博客
07-29 2万+
通过uni.createSelectorQuery() 来实现，注意：要获得的高度，是在页面上已经有了dom之后才能获得 const query = uni.createSelectorQuery() query.select('#ListConS').boundingClientRect() query...
uni-app获取dom元素到顶部的距离以及操作dom元素的一些样式
m0_46588330的博客
09-30 1268
从信息通知跳转到另一个页面的评论专区 消息通知页面中的点击跳转 var that = this; const query = uni.createSelectorQuery().in(that); query.select('#tab_1').boundingClientRect(data => { // console.log("得到布局位置信息" + JSON.stringify(data)); console.log("节点离页面顶部的距离为1---" + data.
uniapp获取元素位置：top、bottom、left、right
奔跑的狮子
12-01 1591
【代码】uniapp获取元素位置：top、bottom、left、right。
uni-app 组件里面获取元素宽高的实现
10-15
主要介绍了uni-app 组件里面获取元素宽高的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
uniapp——获取某元素距离顶部的距离，并将高度应用到css里面，为实现scroll-view内容而不让整个页面出现滚动条。
努力、拼搏、奋进
09-17 7062
uniapp——获取某元素距离顶部的距离，并将高度应用到css里面，为实现scroll-view内容而不让整个页面出现滚动条。
uniapp获取元素距离顶部的距离
seimeii的博客
03-01 6077
var that=this; const query = uni.createSelectorQuery().in(that); query.select('元素').boundingClientRect(data => { console.log(data) }).exec();
uniapp 获取元素距离顶部的距离，实现页面滚动元素消失后悬浮在底部的效果
业余前端的职业经历
11-03 5319
还是比较常见的这种效果，就是用户在页面中一直往下滚动，上面的有些操作按钮 要在滚动消失后 ，悬浮在底部 ，回去的时候重新隐藏掉 这个就涉及到两个知识点了，一个就是 元素距离顶部的距离 另一个就是监听页面的滚动 监听页面滚动的好说 onPageScroll(e) { // e.scrollTop 获取页面的滚动高度 this.show = e.scrollTop >= this.scrollTop; }, 主要还是获取元素距离顶部的距离这个 首先我们可以给元素设置一个标识 <view id=
uni-app 获取一个目标元素的高，元素到顶部的距离
qq_44757978的博客
06-07 2651
// 获取一个目标元素的高度 data() { return { viewHeight: 0, // 元素的高度 } }, mounted() { this.getHeight() }, methods: { async getHeight() { //class-name 元素类名 viewHeight 元素的高度 await this.getViewHeight('class-name', 'viewHeight'); }.
uniapp元素距离顶部距离
最新发布
12-28
获取元素距离顶部的高度可以使用uniapp的createSelectorQuery方法和boundingClientRect方法来实现。具体步骤如下： 1. 在mounted生命周期函数中，使用uni.getSystemInfo方法获取当前屏幕的高度。 2. 使用uni....
uni-app滑到一定距离固定某个元素在顶部，如导航栏等
m0_60141876的博客
07-13 4683
uni-app最近项目有个需求是滑到一定距离固定某个元素在顶部，看到这个需求，大致的思路是首先获取节点信息，然后使用uni-app生命周期中onPageScroll监听滚动，当滚动到元素接近顶部位置时添加class，固定元素，有了这个思路，那我们就来实现代码吧~ html： <template> <view class="content"> <view class="wrap"> <view class="li...
uniapp小程序获取元素距离
05-24
可以使用uniapp的API `uni....我们可以通过`data`参数来获取元素的位置信息，例如`data.top`表示元素距离顶部的距离。 需要注意的是，查询对象的`exec()`方法是异步执行的，因此需要在回调函数中处理结果。
uniapp获取滚动条的位置和元素距离顶部的距离
qq_54646196的博客
11-19 3899
uniapp获取滚动条的位置和元素距离顶部的距离 2.uniapp生命周期实时获取滚动条的位置。超过100rpx我就显示头部导航哈。获取元素至顶部的距离。
uniapp获取标签距离页面顶部的高度，并计算出页面的剩余高度。自适应剩余页面高度，动态设置剩余页面高度。
qq_43807473的博客
05-24 7220
uniapp获取标签距离页面顶部的高度，自适应剩余页面高度。动态设置剩余页面高度。swiper自适应剩余页面高度，scroll-view自适应剩余页面高度。
uniapp,web-view在app上预留顶部安全位置，距离头部位置
Sun_Maple_jw的博客
09-11 1180
【代码】uniapp,web-view在app上预留顶部安全位置，距离头部位置。
uniapp 获取元素高度
B13362260109的博客
07-20 781
中，你可以使用 wx.createSelectorQuery() 方法来获取元素的高度。这段代码会在页面渲染完成后执行，并在回调函数中输出元素的高度。
uniapp获取元素距离顶部的距离，监听滚动事件
qwe19991123的博客
12-01 7106
监听滚动： onPageScroll(e) { // e.scrollTop 获取页面的滚动高度 this.show = e.scrollTop >= this.scrollTop; }, 获取元素距离顶部距离： <view id="demo"><view> let query = uni.createSelectorQuery().in(this); query.select('#demo').boundingClientRect(data => { cons
uni-app 获取顶部安全距离 ，底部安全距离，元素的高度
weixin_45414972的博客
04-24 6146
【代码】uni-app 获取顶部安全距离 ，底部安全距离，元素的高度。
小程序某元素到顶部的距离
weixin_45942304的博客
05-31 1642
uni.createSelectorQuery().select(".picture-introduction").boundingClientRect(data=>{//目标节点     uni.createSelectorQuery().select(".detail").boundingClientRect((res)=>{//最外层盒子节点(负数)     uni.pageScrollTo({  &
vue项目引入vue-fullpage为什么使用fullpage标签就报错等一系列问题
热门推荐
weixin_42280496的博客
10-31 1万+
1.问题描述： 页面在滚动时，我想拿到滚动轴距离页面顶部的距离。我把这个距离赋给一个变量，在某些条件下，我要设置滚动轴距离等于我刚才保存的变量。 2.解决问题： 获取滚动轴距离页面顶部距离： onPageScroll生命周期函数 //代码 onPageScroll(res){ console.log(res.scrollTop);//距离页面顶部距离 }, //示例 //官方文档API ht...
uniapp实现topwindow，leftwindow
03-29
Uniapp是一款跨平台的开发框架，支持多种终端的应用开发。要实现topwindow和leftwindow，可以使用uniapp的原生组件和CSS样式来实现。 1. 实现topwindow 可以使用uniapp的原生组件navbar来实现顶部窗口，代码如下： ``` <template> <view> <navbar title="顶部窗口"></navbar> </view> </template> ``` 在CSS中设置navbar的样式： ``` <style> .uni-navbar { background-color: #fff; /* 设置背景颜色 */ border-bottom: 1px solid #ccc; /* 设置底部边框 */ } </style> ``` 2. 实现leftwindow 可以使用uniapp的原生组件sidebar来实现左侧窗口，代码如下： ``` <template> <view> <sidebar :list="list"></sidebar> </view> </template> <script> export default { data() { return { list: [ /* 左侧窗口的菜单列表 */ { name: '菜单一', icon: 'home', url: '/pages/index/index' }, { name: '菜单二', icon: 'search', url: '/pages/search/search' }, { name: '菜单三', icon: 'setting', url: '/pages/setting/setting' } ] } } } </script> ``` 在CSS中设置sidebar的样式： ``` <style> .uni-sidebar { background-color: #f5f5f5; /* 设置背景颜色 */ border-right: 1px solid #ccc; /* 设置右侧边框 */ position: fixed; /* 设置为固定定位 */ top: 0; /* 距离顶部为0 */ left: 0; /* 距离左侧为0 */ bottom: 0; /* 距离底部为0 */ width: 200px; /* 设置宽度 */ z-index: 999; /* 设置层级 */ } </style> ``` 以上是uniapp实现topwindow和leftwindow的简单示例，具体实现可根据需求进行调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值