uni-app h('picker')没法用么？试了好几个mode都不行，其他的switch、button之类的倒是正常的

uni-app h(‘picker’)没法用么？试了好几个mode都不行，其他的switch、button之类的倒是正常的

| 开发环境 | 版本号 | 项目创建方式 |
|----------|--------|--------------|
| Mac      | Ventura 13.1 | HBuilderX    |

### 示例代码：
```javascript
h('picker', {  
    mode: 'selector',  
    range: [  
        'A', 'B', 'C'  
    ],  
    value: 0  
})

操作步骤：

h('picker', {  
    mode: 'selector',  
    range: [  
        'A', 'B', 'C'  
    ],  
    value: 0  
})

预期结果：

能显示picker组件

实际结果：

不能显示picker组件

bug描述：

使用h函数渲染，完全不显示任何东西，换成其他的正常


更多关于uni-app h('picker')没法用么？试了好几个mode都不行，其他的switch、button之类的倒是正常的的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

app端不支持h函数 文档

更多关于uni-app h('picker')没法用么？试了好几个mode都不行，其他的switch、button之类的倒是正常的的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，h('picker') 是用于创建 Picker 组件的虚拟节点。如果你在使用 h('picker') 时遇到问题，可能有以下几种原因和解决方法：

1. 检查 Picker 的 mode 属性

picker 组件的 mode 属性决定了它的类型，常见的 mode 有：

  • selector：普通选择器
  • multiSelector：多列选择器
  • time：时间选择器
  • date：日期选择器
  • region：省市区选择器

确保你设置的 mode 是正确的，并且根据不同的 mode，picker 的行为和参数会有所不同。

h('picker', {
  mode: 'selector',
  range: ['选项1', '选项2', '选项3'],
  onChange: (event) => {
    console.log('选中的值:', event.detail.value);
  }
})

2. 检查 Picker 的 range 属性

如果你使用的是 selector 或 multiSelector 模式，range 属性是必需的，它指定了选择器的选项。

h('picker', {
  mode: 'selector',
  range: ['选项1', '选项2', '选项3'],
  onChange: (event) => {
    console.log('选中的值:', event.detail.value);
  }
})

3. 确保 Picker 的事件绑定正确

picker 组件通常会有 onChange 或 onCancel 等事件，确保你正确绑定了这些事件。

h('picker', {
  mode: 'selector',
  range: ['选项1', '选项2', '选项3'],
  onChange: (event) => {
    console.log('选中的值:', event.detail.value);
  }
})

4. 检查 uni-app 版本

确保你使用的是最新版本的 uni-app，某些旧版本可能存在 Bug 或功能不完善的情况。

5. 使用模板语法

如果你在使用 h('picker') 时遇到问题，可以尝试使用 uni-app 的模板语法来创建 picker 组件，这样可能更容易调试。

<template>
  <picker mode="selector" :range="options" @change="handleChange">
    <view>点击选择</view>
  </picker>
</template>

<script>
export default {
  data() {
    return {
      options: ['选项1', '选项2', '选项3']
    };
  },
  methods: {
    handleChange(event) {
      console.log('选中的值:', event.detail.value);
    }
  }
};
</script>
回到顶部