Framework7的选择器比微信小程序的picker麻烦多了，网上的资料较少，记录下它的一个使用案例。
picker组件文档地址：
https:// framework7.io/docs/picker
普通选择器
JS部分：
let picker = null;
// 选择状态
const [statusSelected, setStatusSelected] = useState('未处理')
const [status, setStatus] = useState('')
// 设置遮罩层
const [overflyZIndex, setOverlayZIndex] = useState(0);
// 状态切换
const statusChange = () => {
if (picker != null) {
picker.destroy();
}
setOverlayZIndex(12000)
picker = f7router.app.picker.create({
inputEl: '#statusChange',
rotateEffect: true,//3d效果
cssClass: 'lineAndStation',
closeByOutsideClick: false,
renderToolbar: function () {
return '<div class="toolbar">' +
'<div class="left">' +
'<a href="#" class="link line-cancel">取消</a>' +
'</div>' +
'<div class="right">' +
'<a href="#" class="link line-sure">确定</a>' +
'</div>' +
'</div>';
}, value: [statusSelected],
cols: [
{
textAlign: 'center',
values: ["全部", "未处理", "已处理"],
}
],
on: {//事件
open: function (picker) {
picker.$el.find('.line-sure').on('click', function () {
const departData = picker.getValue();//获取当前选择值并弹框
setStatusSelected(departData[0]);
setStatus(departData[0])
picker.destroy();
setOverlayZIndex(0);
})
picker.$el.find('.line-cancel').on('click', function () {
picker.destroy();
setOverlayZIndex(0)
})
},
}
}).open();
}
html部分
{/* 遮罩使用 */}
<div style={{ position: 'fixed', left: '0', top: '0', zIndex: overflyZIndex, width: '100vw', height: '100vh', backgroundColor: '#000000b3' }}></div>
{/* 显示状态代码 */}
<div className={styles.box} id={'statusChange'} onClick={() => { statusChange() }}>
<div className={styles.label}><span>处理状态：</span></div>
<div><span style={{ color: status == '全部' ? '#b2b2b9' : '#161718' }}>{status ? (status == '全部' ? '请选择状态' : status) : '未处理'}</span></div>
</div>
时间选择器
JS部分
let picker = null;
// 获取当前时间
const todaySelected = new Date();
const [timeSelected, setTimeSelected] = useState([todaySelected.getFullYear(), todaySelected.getMonth() + 1, todaySelected.getDate()]);
// 控制遮罩
const [overflyZIndex, setOverlayZIndex] = useState(0);
// 时间切换
const timeChange = () => {
if (isImplement) return;
if (picker != null) {
picker.destroy();
}
setOverlayZIndex(12000)
const today = new Date();
picker = f7router.app.picker.create({
inputEl: '#timeChange',
rotateEffect: true,//3d效果
cssClass: 'lineAndStation',
closeByOutsideClick: false,
renderToolbar: function () {
return '<div class="toolbar">' +
'<div class="left">' +
'<a href="#" class="link line-cancel">取消</a>' +
'</div>' +
'<div class="right">' +
'<a href="#" class="link line-sure">确定</a>' +
'</div>' +
'</div>';
}, value: timeSelected,
cols: [
// Years
{
values: (function () {
var arr = [];
for (var i = 1950; i <= 2030; i++) { arr.push(i); }
return arr;
})(),
textAlign: 'left'
},
// Months
{
values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
},
// Days
{
values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
},
],
on: {//事件
open: function (picker) {
picker.$el.find('.line-sure').on('click', function () {
const departData = picker.getValue();//获取当前选择值并弹框
// 获取选中月份的最大天数
const daysInMonth = new Date(departData[0], departData[1] * 1, 0).getDate()
if (departData[2] > daysInMonth) {
departData[2] = daysInMonth
}
const temp = departData.join('-')
setTimeSelected(departData);
setTime(temp)
picker.destroy();
setOverlayZIndex(0);
})
picker.$el.find('.line-cancel').on('click', function () {
picker.destroy();
setOverlayZIndex(0)
})
},
}
}).open();
}
html部分
{/* 遮罩使用 */}
<div style={{ position: 'fixed', left: '0', top: '0', zIndex: overflyZIndex, width: '100vw', height: '100vh', backgroundColor: '#000000b3' }}></div>
{/* 显示状态代码 */}
<div id={'timeChange'} className={styles.box} onClick={() => { timeChange() }}>
<div className={styles.label}><span>抛粉时间：</span></div>
<div style={{ width: '80px' }}><span style={{ color: time ? '#161718' : '#b2b2b9' }}>{time ? time : '请选择时间'}</span></div>
<Icon style={{ marginTop: '6px', marginLeft: '7px', fontSize: '12px' }} f7="arrowtriangle_down_fill"></Icon>
</div>
