uniapp 获取多个元素高度变化

最新推荐文章于 2024-04-11 11:47:05 发布

基鑫阁

最新推荐文章于 2024-04-11 11:47:05 发布

阅读量765

点赞数

文章标签： uni-app 前端 javascript html css

本文链接：https://blog.csdn.net/weixin_35749796/article/details/129067813

版权

如果你想获取 uni-app 中的多个元素的高度变化，你可以使用 uni-app 的页面事件 "onPageScroll"。这个事件会在页面滚动时触发，每次触发时都会返回一个 object，其中包含了当前页面的滚动位置信息。

你可以在页面的 data 中定义一个变量来记录当前页面的滚动位置，然后在 "onPageScroll" 事件的回调函数中更新这个变量的值。然后你就可以在页面的 template 中使用这个变量来控制元素的高度了。

例如，你可以在页面的 data 中定义一个变量 "scrollTop" 来记录当前页面的滚动位置：

data: {
  scrollTop: 0
}

然后在 "onPageScroll" 事件的回调函数中更新 "scrollTop" 的值：

onPageScroll: function(e) {
  this.scrollTop = e.scrollTop;
}

最后，你可以在 template 中使用 "scrollTop" 来控制元素的高度：

<template>
  <view>
    <view style="height: {{scrollTop}}px">这是一个高度变化的元素</view>
  </view>
</template>

希望这对你有帮助！

关注