uni-app 4.33版本picker包含特殊字符选取后有问题

uni-app 4.33版本picker包含特殊字符选取后有问题

产品分类：

uniapp/App

PC开发环境操作系统：

Windows

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

win10

HBuilderX类型：

正式

HBuilderX版本号：

4.33

手机系统：

HarmonyOS NEXT

手机系统版本号：

HarmonyOS NEXT Developer Beta2

手机厂商：

华为

手机机型：

mate60

页面类型：

vue

vue版本：

vue3

打包方式：

云端

项目创建方式：

HBuilderX

示例代码：

<picker :key="`className-picker_${new Date().getTime()}`" :range="classList" :range-key="'className'" :value="classIndex" [@change](/user/change)="selectClass" class="m-x-10 overflow-hidden" mode="selector">  
    <view class="ellipsis flex-1 text-center d-flex">  
        <text class="term-txt ellipsis flex-1">{{ classList[classIndex] && classList[classIndex].className }}</text>  
        <text class="iconfont iconxiafang term-icon"></text>  
    </view>  
</picker>  

classList ：[{"_custom":{"type":"reactive","objectType":"Reactive","value":{"id":9466,"cid":10203,"classid":null,"teacherName":null,"imgUrl":null,"className":"新能源汽车概论班级1","studentNum":15,"isGroup":0,"courseName":"新能源汽车概论（2024）","coureseid":null,"sclassid":null,"scdateOfMax":1724860800000,"buildType":null,"classes":[]}}},{"_custom":{"type":"reactive","objectType":"Reactive","value":{"id":9549,"cid":10289,"classid":null,"teacherName":null,"imgUrl":null,"className":"资料1资料1!@#$%^&*()_+{}|:\"<>?~！@#","studentNum":50,"isGroup":0,"courseName":"新能源汽车概论（2024）","coureseid":null,"sclassid":null,"scdateOfMax":1731772800000,"buildType":null,"classes":[]}}}]

操作步骤：

picker 的 range中， 某一项为 资料1!@#$%^&*()_+{}|:"<>?~！@# 在当某一项非特殊字符的，选取变为选取包含特殊字符的。确定后不展示内容

预期结果：

正常展示

实际结果：

展示为空

bug描述：

picker 的 range中， 某一项为 资料1!@#$%^&*()_+{}|:"<>?~！@# 在当某一项非特殊字符的，选取变为选取包含特殊字符的。确定后不展示内容
@change EventHandle value 改变时触发 change 事件，event.detail = {value: value}
返回的detail 为空对象

Image


更多关于uni-app 4.33版本picker包含特殊字符选取后有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 4.33版本picker包含特殊字符选取后有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app 4.33版本中，如果picker组件包含特殊字符，并且在选取这些特殊字符后出现问题，可能是由于多个因素导致的，比如编码问题、渲染问题或者数据绑定问题。下面我将提供一个简单的示例代码，展示如何在uni-app中使用picker组件，并处理包含特殊字符的数据。

首先，确保你的uni-app项目已经正确配置，并且你正在使用4.33版本。接下来，我们可以创建一个包含特殊字符的picker组件示例。

<template>
  <view>
    <picker mode="selector" :range="pickerData" @change="onPickerChange">
      <view class="picker">{{selectedText}}</view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 包含特殊字符的picker数据
      pickerData: ['选项1', '选项2', '选项3', '特殊字符: ¥€©', '更多选项'],
      selectedText: '请选择'
    };
  },
  methods: {
    onPickerChange(e) {
      const index = e.detail.value;
      this.selectedText = this.pickerData[index];
    }
  }
};
</script>

<style>
.picker {
  padding: 20px;
  font-size: 16px;
  border: 1px solid #ccc;
  text-align: center;
}
</style>

在这个示例中，pickerData数组包含了一些普通字符和一个包含特殊字符的选项（‘特殊字符: ¥€©’）。当用户从picker中选择一个选项时，onPickerChange方法会被触发，并更新selectedText变量以显示所选内容。

如果你遇到特殊字符显示或处理上的问题，这里有几个可能的解决方案：

  1. 确保字符编码正确：确保你的项目文件（包括JSON、JS等）使用UTF-8编码保存，以避免编码问题。

  2. 使用Unicode转义序列：对于某些特殊字符，你可能需要使用Unicode转义序列来确保它们在所有平台上都能正确显示。例如，¥可以表示为\u00A5。

  3. 检查渲染问题：在某些情况下，特殊字符可能在某些平台或浏览器上渲染不正确。确保你测试了多个目标平台。

  4. 数据绑定问题：检查pickerData中的数据是否正确绑定到视图上，以及onPickerChange方法是否正确更新了selectedText。

如果你已经尝试了上述方法但仍然遇到问题，可能需要检查uni-app的官方文档或社区论坛，看看是否有其他人遇到了类似的问题，并找到了解决方案。

回到顶部