uni-app picker内text标签下换行导致nvue页面无法显示text内容

uni-app picker内text标签下换行导致nvue页面无法显示text内容

项目信息 详情
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 19041.985
HBuilderX类型 正式
HBuilderX版本号 2.9.8
手机系统 Android
手机系统版本号 Android 11
手机厂商 小米
手机机型 Redmi K30i 5G
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

//写法1：  
<_picker @change="bindRoomListChange" :value="roomListIndex" :range="roomList" range-key="SportName"  
 style="flex: 1;">
    <text class="uni-input text-char" style="background-color: #eee; border-radius: 5px;flex: 1;line-height: 70rpx;padding-left: 20rpx;">
    {{roomList[roomListIndex].SportName}}
    </text>
</_picker>

roomList:[
    {
      "SportName": "全部",
      "SportID": "",
    },
],
roomListIndex:0

操作步骤：

使用Hbuilder X2.9.8按照如下“写法1”即可复现此问题.

预期结果：

能正常显示picker内text标签中的内容。

实际结果：

无法显示picker内text标签中的内容。

bug描述：

picker内部的text内的内容如果换行，在nvue页面会出现显示不出来的问题。


更多关于uni-app picker内text标签下换行导致nvue页面无法显示text内容的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

预计 3.4.4 + 修复

更多关于uni-app picker内text标签下换行导致nvue页面无法显示text内容的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 nvue 页面中，<text> 组件对换行和空格的处理较为严格。当 <text> 标签内的内容存在换行时，可能导致渲染异常，内容无法正常显示。这是由于 nvue 的渲染机制与 vue 页面不同，它更接近原生渲染，对文本节点的处理较为敏感。

针对您的问题，可以尝试以下解决方案：

  1. 移除换行：将 <text> 标签内的内容写成单行形式，避免换行符的影响。例如：
<text class="uni-input text-char" style="background-color: #eee; border-radius: 5px;flex: 1;line-height: 70rpx;padding-left: 20rpx;">{{roomList[roomListIndex].SportName}}</text>
  1. 使用模板字符串或计算属性：如果内容需要动态处理，可以通过计算属性或方法返回去除换行符的文本。例如：
computed: {
  displayText() {
    return this.roomList[this.roomListIndex].SportName.replace(/\n/g, '');
  }
}

然后在模板中使用：

<text>{{ displayText }}</text>
回到顶部