taro-calendar-picker

功能：按字母排序的筛选器，可根据字母进行排序

• 可单选、多选
  • 是否全选
• 支持多种数据格式
  • ['a', 'b' ...] 列表格式，然后自动筛选字母
    • 暂不支持中文
  • [{ label: 'a', value: 'A', key: 'A' }, { label: 'xds', value: 'X', key: 'X' }],

npm i -s taro-scroll-picker

然后，引入并使用

import {
  Button,
} from "tea-component-mobile";
import Picker from "taro-scroll-picker";
import 'taro-scroll-picker/dist/index.css';
import moment from 'moment';

const _list = Array(Math.floor(1 * 10)).fill(0).map((v, idx) => Mock.Random.word(5, 8));

export default () => {
  const [visible, setVisible] = useState(false);
  const [value, setValue] = useState([]);
  const [selectedAll, setSelectedAll] = useState(false);
  const [list, setList] = useState(_list);
  useEffect(() => {
    setInterval(() => {
      // setVisible(Math.round(Math.random()) === 0);
    }, 2000)
  }, [])
  return (
    <Picker
      selectable={true} // 是否可选
      list={list} // 数据
      value={value}
      onChange={(selecteds, isSelectedAll) => {
        setValue(selecteds)
        setSelectedAll(isSelectedAll)
      }}
      positionCheckBox={positionCheckBoxPop ? 'left' : 'right'} // checkbox 靠左？靠右？
      isPopup={true} // 是否弹窗
      maskClosable={true} // 遮罩层是否可点击关闭；默认是 false
      onClosePopup={(selecteds) => { // 关闭弹窗时触发
        console.log('关闭的回调', selecteds)
      }}
      popupHeight={400}
      isSingleSelect={isSingleSelectPop} // 是否单选
      popupTitle={"popup标题"}
    >
      <Button>打开弹窗</Button>
    </Picker>
  )
}