在uni-app nvue中使用movable-area运行到真机后不显示

在uni-app nvue中使用movable-area运行到真机后不显示

开发环境 版本号 项目创建方式
Mac MacOS 15.5 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：MacOS 15.5

HBuilderX类型：正式

HBuilderX版本号：4.66

手机系统：iOS

手机系统版本号：iOS 18

手机厂商：苹果

手机机型：iPhone12

页面类型：nvue

vue版本：vue3

打包方式：离线

项目创建方式：HBuilderX

示例代码：

```html
<view class="process-container">  
    <!-- 手势滑块 -->  
    <movable-area class="process-movable-area">  
      <movable-view class="process-movable-view" direction="all">  
        <text style="width: 150rpx; height: 200rpx; background: blue">text</text>  
      </movable-view>  
    </movable-area>  
</view>  

.process-container {  
  margin: 18rpx 0;  
  width: 710rpx;  
  height: 228rpx;  
  background: #edeff3;  
  border-radius: 20rpx;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  

  .process-movable-area {  
    width: 674rpx;  
    height: 94rpx;  
    background: red;  
    overflow: hidden;  

    .process-movable-view {  
      display: flex;  
      align-items: center;  
      justify-content: center;  
      width: 130rpx;  
      height: 57rpx;  

      .process-top-line {  
        width: 130rpx;  
        height: 57rpx;  
      }  
    }  
  }  
}

操作步骤：

  • 真机运行

预期结果：

  • 在真机上正常显示

实际结果：

  • 运行到iPhone真机或者模拟器上不显示

bug描述：

  • 在.nvue中使用movable-area组件，运行到web上正常显示，运行到iPhone真机或者模拟器上就不显示

更多关于在uni-app nvue中使用movable-area运行到真机后不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于在uni-app nvue中使用movable-area运行到真机后不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在nvue中使用movable-area组件时，需要注意以下几点可能导致真机不显示的问题：

  1. nvue的样式支持有限，建议使用内联样式或class绑定，避免使用复杂的CSS选择器。将样式改为内联方式：
<movable-area style="width:674rpx;height:94rpx;background:red;overflow:hidden">
  <movable-view style="width:130rpx;height:57rpx;display:flex;align-items:center;justify-content:center" direction="all">
    <text style="width:150rpx;height:200rpx;background:blue">text</text>
  </movable-view>
</movable-area>

  1. 确保movable-area设置了明确的宽高，且movable-view的尺寸不超过movable-area。

  2. 检查是否缺少必要的编译配置，在manifest.json中确认是否启用了nvue编译模式：

"app-plus": {
  "nvueCompiler": "uni-app"
}
回到顶部