picker
picker copied to clipboard
Published
20 hours ago •
ustbhuangyi
ustbhuangyi
小小的提个优化建议
css代码我做了优化,添加了从底部弹出的动画效果(源代码有重复无用的)：
//UIPickerView 筛选器组件scss源码
@function h($height,$vh:rem) {
@return $height/20 +$vh; //常数20是根据当前引入的normalize.css 里的 font: 20px / 1.5
}
.picker {
display: none;
position: fixed;
top: 0;
z-index: 100;
width: 100%;
height: 100%;
overflow: hidden;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
.picker-mask {
position: absolute;
z-index: 500;
width: 100%;
height: 100%;
transition: all .5s;
-webkit-transition: all .5s;
background: transparent;
opacity: 0;
&.show {
background: rgba(0, 0, 0, 0.6);
opacity: 1;
}
}
.picker-panel {
position: absolute;
z-index: 600;
bottom: -100%;
width: 100%;
background: #fff;
transition: all .6s;
-webkit-transition: all 0.6s;
&.show {
bottom:0;
transform: translateY(0);
-webkit-transform: translateY(0);
}
.picker-choose {
position: relative;
height: h(45);
color: #878787;
font-size: h(14);
background-color: #f8f8f8;
&::after {
position: absolute;
content: '';
width: 100%;
height: 1px;
left: 0;
bottom: 0;
background-color: #ccc;
transform: scaleY(.5);
transform-origin: bottom left;
}
.picker-title {
line-height: h(50);
font-size: h(19);
text-align: center;
color: #333;
display: none;
}
.cancel {
position: absolute;
padding: h(10);
font-size: h(17);
}
.confirm {
position: absolute;
padding: h(10);
font-size: h(17);
right: 0;
color: #2D72F1;
}
.cancel {
left: 0;
color: #2D72F1;
}
}
.picker-content {
position: relative;
.mask-bottom {
position: absolute;
z-index: 10;
width: 100%;
height: h(68);
pointer-events: none;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
.mask-top {
position: absolute;
z-index: 10;
width: 100%;
height: h(68);
pointer-events: none;
transform: translateZ(0);
-webkit-transform: translateZ(0);
top: 0;
background: -webkit-gradient(linear, left bottom, left top, from(hsla(0, 0%, 100%, 0.4)), to(hsla(0, 0%, 100%, 0.8)));
background: -o-linear-gradient(bottom, hsla(0, 0%, 100%, 0.4), hsla(0, 0%, 100%, 0.8));
&:after {
content: " ";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
border-top: 1px solid #ccc;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
}
}
.mask-bottom {
bottom: 0;
background: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 0.4)), to(hsla(0, 0%, 100%, 0.8)));
background: -o-linear-gradient(top, hsla(0, 0%, 100%, 0.4), hsla(0, 0%, 100%, 0.8));
&:before {
content: " ";
display: block;
position: absolute;
left: 0;
width: 100%;
top: 0;
border-top: 1px solid #ccc;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
}
.wheel-wrapper {
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: flex;
padding: 0 h(10);
.wheel {
-ms-flex: 1 1 1 e-9px;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 1 e-9px;
flex-basis: 1 e-9px;
width: 1%;
height: h(172);
overflow: hidden;
font-size: h(21);
.wheel-scroll {
margin-top: h(68);
line-height: h(36);
.wheel-item {
height: h(36);
overflow: hidden;
white-space: nowrap;
color: #333;
}
}
}
}
}
.picker-footer {
height: h(20);
}
}
希望加入三元运算
例: <input type="text" id="job" readonly>）
// JS 获取方法
// var job = [{text: '国家公务员', value: 1}, {text: '编辑策划', value: 2}, {text: '专业技术', value: 3}, {text: '公司职员', value: 4}, {text: '企业管理', value: 5}, {text: '服务人员', value: 6}, {text: '现役军人', value: 7}, {text: '在读学生', value: 8}, {text: '自由职业', value: 9}, {text: '其他', value: 10}];
//
// var picker0El = document.getElementById('job');
// var tag =picker0El.tagName.toLowerCase();
// var picker0 = new Picker({data: [job]});
// picker0.on('picker.select', function (selectedVal, selectedIndex) {
// //判断当前ID元素的tagName，写入对应数据；
// tag=='input'? picker0El.setAttribute("value",job[selectedIndex[0]].text): nameEl.innerText = job[selectedIndex[0]].text;
// });
//
// picker0El.addEventListener('click', function () {
// picker0.show();//显示UIPickerView 筛选器组件
// });
// JQ 获取方法
$('#job').on('click', function () {
const $this = $(this);
const $tag=$this.prop('tagName').toLowerCase();
const job = [{text: '国家公务员', value: 1}, {text: '编辑策划', value: 2}, {text: '专业技术', value: 3}, {text: '公司职员', value: 4}, {text: '企业管理', value: 5}, {text: '服务人员', value: 6}, {text: '现役军人', value: 7}, {text: '在读学生', value: 8}, {text: '自由职业', value: 9}, {text: '其他', value: 10}];
const picker0 = new Picker({data: [job]});
picker0.show();
picker0.on('picker.select', function (selectedVal, selectedIndex) {
$tag=='input'?$this.val(job[selectedIndex[0]].text): $this.text(job[selectedIndex[0]].text);
});
})
强烈建议：城市联动选择器的调用方法： PickerCity(id);
就是把亲的 "..\picker-master\docs\city\index.js" 用一个函数封装起来，然后调用。
----------------------------------------------------------------
function PickerCity(id) {
var idName = id == undefined ? 'city' : id;
var nameEl = document.getElementById(idName);
var tag =nameEl.tagName.toLowerCase();
……
picker.on('picker.select', function (selectedVal, selectedIndex) {
var text1 = first[selectedIndex[0]].text;
var text2 = second[selectedIndex[1]].text;
var text3 = third[selectedIndex[2]] ? third[selectedIndex[2]].text : '';
/*判断当前ID元素的tagName，写入对应数据；*/
tag=='input'? nameEl.setAttribute("value",text1 + ' ' + text2 + ' ' + text3): nameEl.innerText = text1 + ' ' + text2 + ' ' + text3;
});
……
}
----------------------------------------------------------------
1. PickerCity() 是调用城市筛选器的函数，默认调用的元素ID为“city”，可以不带ID。
例： <input type="text" id="city" readonly>
PickerCity();
2. 如果默认ID不是“city”，需带参元素ID。
例： <input type="text" id="currentCity" readonly>
PickerCity('currentCity');
