uniapp 小程序子组件 scroll-view 高度计算及固定按钮实现

在uniapp中，可以通过以下步骤计算子组件内部scroll-view的高度：\n\n1. 在父组件中，获取子组件外部scroll-view的高度（假设为outerHeight）。\n2. 在子组件的mounted生命周期钩子函数中，使用uni.createSelectorQuery()方法获取子组件内部scroll-view的节点信息。\n3. 使用节点信息中的height属性获取子组件内部scroll-view的高度（假设为innerHeight）。\n4. 计算子组件内部scroll-view的实际高度（假设为finalHeight）：finalHeight = outerHeight - innerHeight。\n5. 将finalHeight作为props传递给子组件，子组件根据该值设置内部scroll-view的高度。\n\n具体代码示例：\n\n父组件：\n\nvue\n<template>\n <view>\n <scroll-view class="outer-scroll-view" :style="{ height: outerHeight + 'px' }">\n <child-component :inner-height="innerHeight"></child-component>\n </scroll-view>\n </view>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n outerHeight: 0,\n innerHeight: 0\n };\n },\n mounted() {\n this.$nextTick(() => {\n uni.createSelectorQuery()\n .in(this)\n .select('.outer-scroll-view')\n .boundingClientRect((rect) => {\n this.outerHeight = rect.height;\n })\n .exec();\n });\n }\n};\n</script>\n\n<style>\n.outer-scroll-view {\n /* 设置外部scroll-view的样式 */\n}\n</style>\n\n\n子组件：\n\nvue\n<template>\n <view>\n <scroll-view class="inner-scroll-view" :style="{ height: innerHeight + 'px' }">\n <!-- 子组件内部内容 -->\n </scroll-view>\n <button class="fixed-button">固定按钮</button>\n </view>\n</template>\n\n<script>\nexport default {\n props: {\n innerHeight: {\n type: Number,\n default: 0\n }\n },\n mounted() {\n this.$nextTick(() => {\n uni.createSelectorQuery()\n .in(this)\n .select('.inner-scroll-view')\n .boundingClientRect((rect) => {\n this.innerHeight = rect.height;\n })\n .exec();\n });\n }\n};\n</script>\n\n<style>\n.inner-scroll-view {\n /* 设置内部scroll-view的样式 */\n}\n\n.fixed-button {\n /* 设置固定按钮的样式 */\n}\n</style>\n\n\n以上代码示例中，父组件通过uni.createSelectorQuery()方法获取外部scroll-view的高度，并将该值传递给子组件。子组件在mounted生命周期钩子函数中，通过uni.createSelectorQuery()方法获取内部scroll-view的高度，并将该值赋给innerHeight属性。最后，子组件根据innerHeight属性设置内部scroll-view的高度。\n\n需要注意的是，在子组件中使用uni.createSelectorQuery()方法时，需要通过in()方法指定查询的范围为当前组件（this）。\n\n希望以上解答能够对您有所帮助！