taro-calendar-picker
功能：按字母排序的筛选器，可根据字母进行排序
- 可单选、多选
- 是否全选
- 支持多种数据格式
- ['a', 'b' ...] 列表格式，然后自动筛选字母
- 暂不支持中文
- [{ label: 'a', value: 'A', key: 'A' }, { label: 'xds', value: 'X', key: 'X' }],
- ['a', 'b' ...] 列表格式，然后自动筛选字母
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>
)
}