uniapp局部滚动，动态style带有calc计算

最新推荐文章于 2024-11-15 11:50:24 发布

想不到耶

最新推荐文章于 2024-11-15 11:50:24 发布

阅读量919

点赞数 1

文章标签： uni-app

本文链接：https://blog.csdn.net/m0_59962820/article/details/130385412

版权

文章介绍了在uni-app中使用scroll-view进行垂直滚动时，如何动态获取元素距离顶部的高度并更新视图高度。通过uni.createSelectorQuery的boundingClientRect方法选择元素并获取其位置信息，然后设置CSS计算值来适应内容高度。特别指出，此方法在支付宝小程序中可能无效，因为不支持in(component)语法。

摘要由CSDN通过智能技术生成

HTML：

<scroll-view scroll-y id="scrollList" :style="updateHeight()">
    <view>
        这里是要做滚动的区域
    </view>
</scroll-view>

JS:

<script>
	export default {
		data() {
			return {
				listTop: 0,
			}
		},
		methods: {
			updateHeight() {
				setTimeout(() => {
					let query = uni.createSelectorQuery().in(this);
						// 需要给滚动区域设置一个id标识，在这里是scrollList
						query.select('#scrollList').boundingClientRect(data => {
							console.log(data.top)
							this.listTop = data.top //距离顶部的高度
						}).exec();
				},100)
				return { height: `calc(100vh - ${this.listTop}px)` };
			}
		}
	}
</script>

注意：支付宝小程序不支持 in(component)，使用无效果

参考：

uni.createSelectorQuery() | uni-app官网