H5内单选框用Picker实现不能用html的select

靖舒

于 2022-09-19 09:55:21 发布

阅读量1k

点赞数

分类专栏：移动端兼容性文章标签： html antd form表单 javascript

本文链接：https://blog.youkuaiyun.com/u013085212/article/details/126927578

版权

移动端兼容性专栏收录该内容

2 篇文章

订阅专栏

H5内，单选框，首先想到html标签select，如下代码

const renderSelect = (options) => (
  <select>
    {(options || []).map((item) => (
      <option key={item.value} value={item.value}>{item.title}</option>
    ))}
  </select>
);

存在兼容性问题（真机上的样式不美观），不能使用select实现

替代方案是使用antd-mobile的Picker实现，代码如下

  renderList = (props) => {
    const { options, form } = props;
    return (
      <List>
        <Picker
          extra="请选择"
          data={options}
          {...form.getFieldProps('department', { initialValue: '1' })}
        >
          <List.Item arrow="horizontal">部门</List.Item>
        </Picker>
      </List>
    );
  };

antd-mobile Picker 文档链接为：Ant Design Mobile | A Mobile Design Specification