Open iTaster opened 7 years ago
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');
亲的js的方法很牛逼,改用jq感觉就没有那么好用了,每次点击都会对dom造成污染
有建议的话可以提 PR 哦 ~ 也方便查看 diff ~
==,感觉 PR 好麻烦
css代码我做了优化,添加了从底部弹出的动画效果(源代码有重复无用的):