在uniapp中,可以通过以下步骤计算子组件内部scroll-view的高度:

  1. 在父组件中,获取子组件外部scroll-view的高度(假设为outerHeight)。
  2. 在子组件的mounted生命周期钩子函数中,使用uni.createSelectorQuery()方法获取子组件内部scroll-view的节点信息。
  3. 使用节点信息中的height属性获取子组件内部scroll-view的高度(假设为innerHeight)。
  4. 计算子组件内部scroll-view的实际高度(假设为finalHeight):finalHeight = outerHeight - innerHeight。
  5. 将finalHeight作为props传递给子组件,子组件根据该值设置内部scroll-view的高度。

具体代码示例:

父组件:

<template>
  <view>
    <scroll-view class="outer-scroll-view" :style="{ height: outerHeight + 'px' }">
      <child-component :inner-height="innerHeight"></child-component>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      outerHeight: 0,
      innerHeight: 0
    };
  },
  mounted() {
    this.$nextTick(() => {
      uni.createSelectorQuery()
        .in(this)
        .select('.outer-scroll-view')
        .boundingClientRect((rect) => {
          this.outerHeight = rect.height;
        })
        .exec();
    });
  }
};
</script>

<style>
.outer-scroll-view {
  /* 设置外部scroll-view的样式 */
}
</style>

子组件:

<template>
  <view>
    <scroll-view class="inner-scroll-view" :style="{ height: innerHeight + 'px' }">
      <!-- 子组件内部内容 -->
    </scroll-view>
    <button class="fixed-button">固定按钮</button>
  </view>
</template>

<script>
export default {
  props: {
    innerHeight: {
      type: Number,
      default: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      uni.createSelectorQuery()
        .in(this)
        .select('.inner-scroll-view')
        .boundingClientRect((rect) => {
          this.innerHeight = rect.height;
        })
        .exec();
    });
  }
};
</script>

<style>
.inner-scroll-view {
  /* 设置内部scroll-view的样式 */
}

.fixed-button {
  /* 设置固定按钮的样式 */
}
</style>

以上代码示例中,父组件通过uni.createSelectorQuery()方法获取外部scroll-view的高度,并将该值传递给子组件。子组件在mounted生命周期钩子函数中,通过uni.createSelectorQuery()方法获取内部scroll-view的高度,并将该值赋给innerHeight属性。最后,子组件根据innerHeight属性设置内部scroll-view的高度。

需要注意的是,在子组件中使用uni.createSelectorQuery()方法时,需要通过in()方法指定查询的范围为当前组件(this)。

希望以上解答能够对您有所帮助

用uniapp开发的微信小程序子组件是scroll-view包裹的首先计算了这个scroll-view的高度但是子组件内部还有一个scroll-view底部有一个按钮固定怎么计算这个子组件内部的scroll-view的高度

原文地址: https://www.cveoy.top/t/topic/iLSZ 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录