uni-app nvue页面 app中movable-area组件不能动态设置高度

uni-app nvue页面 app中movable-area组件不能动态设置高度

信息类别 详细信息
产品分类 uniapp/App
PC开发环境 Windows
操作系统版本 win10
HBuilderX类型 正式
HBuilderX版本 4.17
手机系统 Android
手机系统版本 Android 10
手机厂商 小米
手机机型 MI8
页面类型 nvue
Vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<template>      
    <view>      
        <movable-area :style="{height: height + 'px'}">        
        </movable-area>      
    </view>      
</template>      

<script>      
    export default {      
        data() {      
            return {      
                height: 10, //可拖动区域的高度，单位px      
            }      
        },      
        mounted() {      
            this.height = 100;      
        }      
    }      
</script>

操作步骤：

<template>      
    <view>      
        <movable-area :style="{height: height + 'px'}">        
        </movable-area>      
    </view>      
</template>      

<script>      
    export default {      
        data() {      
            return {      
                height: 10, //可拖动区域的高度，单位px      
            }      
        },      
        mounted() {      
            this.height = 100;      
        }      
    }      
</script>

预期结果：

nvue页面中能正确的动态设置movable-area组件的高度

实际结果：

nvue页面中不能正确的动态设置movable-area组件的高度

bug描述：

<template>  
<view>  
<movable-area :style="{height: height + 'px'}">  
</movable-area>  
</view>  
</template>  

<script>  
export default {  
data() {  
return {  
height: 10, //可拖动区域的高度，单位px  
}  
},  
mounted() {  
this.height = 100;  
}  
}  
</script>

更多关于uni-app nvue页面 app中movable-area组件不能动态设置高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app nvue页面 app中movable-area组件不能动态设置高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 的 nvue 页面中，movable-area 组件的高度确实不能直接通过动态绑定的方式设置。这是因为 nvue 页面的渲染机制与 vue 页面不同，nvue 页面是基于原生渲染的，某些属性的动态绑定可能无法像 vue 页面那样灵活。

不过，你可以通过以下方法间接实现 movable-area 高度的动态设置：

方法一：使用 uni.getSystemInfoSync 动态计算高度

你可以通过 uni.getSystemInfoSync 获取设备的屏幕高度，然后根据需要进行计算，动态设置 movable-area 的高度。

<template>
  <movable-area :style="{ height: areaHeight + 'px' }">
    <movable-view direction="all">可移动区域</movable-view>
  </movable-area>
</template>

<script>
export default {
  data() {
    return {
      areaHeight: 0
    };
  },
  mounted() {
    this.setMovableAreaHeight();
  },
  methods: {
    setMovableAreaHeight() {
      const systemInfo = uni.getSystemInfoSync();
      // 假设你要设置的高度是屏幕高度的 50%
      this.areaHeight = systemInfo.windowHeight * 0.5;
    }
  }
};
</script>

方法二：通过 ref 和 setStyle 动态设置高度

你可以通过 ref 获取 movable-area 组件的实例，然后使用 setStyle 方法动态设置其高度。

<template>
  <movable-area ref="movableArea">
    <movable-view direction="all">可移动区域</movable-view>
  </movable-area>
</template>

<script>
export default {
  mounted() {
    this.setMovableAreaHeight();
  },
  methods: {
    setMovableAreaHeight() {
      const systemInfo = uni.getSystemInfoSync();
      const height = systemInfo.windowHeight * 0.5;
      this.$refs.movableArea.setStyle({
        height: height + 'px'
      });
    }
  }
};
</script>

方法三：使用 calc 动态计算高度

如果你需要根据其他元素的高度来动态设置 movable-area 的高度，可以使用 calc 函数进行计算。

<template>
  <view :style="{ height: otherHeight + 'px' }">其他内容</view>
  <movable-area :style="{ height: `calc(100% - ${otherHeight}px)` }">
    <movable-view direction="all">可移动区域</movable-view>
  </movable-area>
</template>

<script>
export default {
  data() {
    return {
      otherHeight: 100
    };
  }
};
</script>
回到顶部