1

2

3

4

5

6

制作移动端的picker参考vux

7

8

9 *{10 margin: 0;11 padding: 0;12 }13

14

15 .content {16 position: absolute;17 bottom: 0;18 height: 40%;19 background: #fff;20 width: 100%;21 overflow: hidden;22 display: none;23 z-index: 9999

24 }25

26 .title {27 display: flex;28 justify-content: center;29 background-color: #fbf9fe;30 }31

32 .title div {33 height: 44px;34 display: flex;35 justify-content: center;36 padding-left: 10px;37 padding-right: 10px;38 }39

40 .tip {41 flex: 1;42 align-items: center;43 }44

45 .cancel,46 .finish {47 width: 40px;48 align-items: center;49 }50

51 .cancel {52 color: #828282;53 }54

55 .finish {56

57 color: #FF9900;58 }59

60 .dataBox {61 position: relative;62 border-top: 1px solid #f1f2f3;63 display: flex;64 height: 100%;65 background: #f1f2f3;66 overflow: hidden;67 height: 170px;68 }69

70 .middle {71 position: absolute;72 width: 100%;73 height: 34px;74 left: 0;75 top: 68px;76 z-index: 3;77 background-image: linear-gradient(to bottom, #d0d0d0, #d0d0d0, transparent, transparent), linear-gradient(to top, #d0d0d0, #d0d0d0, transparent, transparent);78 background-position: top, bottom;79 background-size: 100%1px;80 background-repeat: no-repeat;81 }82

83 .mengban {84 position: absolute;85 left: 0;86 top: 0;87 height: 100%;88 margin: 0auto;89 width: 100%;90 z-index: 3;91 transform: translateZ(0px);92 background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)), -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));93 background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)), linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));94 background-position: top, bottom;95 background-size: 100%68px;96 background-repeat: no-repeat;97 }98

99 .data {100 position: absolute;101 left: 0;102 top: 0;103 width: 100%;104 z-index: 1;105 webkit-transform: translateZ(0);106 -moz-transform: translateZ(0);107 -ms-transform: translateZ(0);108 -o-transform: translateZ(0);109 transform: translateZ(0);110 }111

112 .data div {113 text-align: center;114 font-size: 16px;115 height: 34px;116 line-height: 34px;117 color: #000;118 }119

120

121 .active {122 color: red !important;123 }124

125 @-webkit-keyframes fadeInUp {126 from{127 opacity: 0;128 -webkit-transform: translate3d(0, 100%, 0);129 transform: translate3d(0, 100%, 0);130 }131

132 to {133 opacity: 1;134 -webkit-transform: translate3d(0, 0, 0);135 transform: translate3d(0, 0, 0);136 }137 }138

139 @keyframes fadeInUp {140 from{141 opacity: 0;142 -webkit-transform: translate3d(0, 100%, 0);143 transform: translate3d(0, 100%, 0);144 }145

146 to {147 opacity: 1;148 -webkit-transform: translate3d(0, 0, 0);149 transform: translate3d(0, 0, 0);150 }151 }152

153 .fadeInUp {154 -webkit-animation-name: fadeInUp;155 animation-name: fadeInUp;156 }157

158 .animated {159 -webkit-animation-duration: 1s;160 animation-duration: 1s;161 -webkit-animation-fill-mode: both;162 animation-fill-mode: both;163 }164

165 @-webkit-keyframes fadeIn {166 from{167 opacity: 0;168 }169

170 to {171 opacity: 1;172 }173 }174

175 @keyframes fadeIn {176 from{177 opacity: 0;178 }179

180 to {181 opacity: 1;182 }183 }184

185 .fadeIn {186 -webkit-animation-name: fadeIn;187 animation-name: fadeIn;188 }189

190 @-webkit-keyframes fadeOut {191 from{192 opacity: 1;193 }194

195 to {196 opacity: 0;197 display: none;198 }199 }200

201 @keyframes fadeOut {202 from{203 opacity: 1;204 }205

206 to {207 opacity: 0;208 }209 }210

211 .fadeOut {212 -webkit-animation-name: fadeOut;213 animation-name: fadeOut;214 }215

216 @-webkit-keyframes fadeInDown {217 from{218 opacity: 0;219 -webkit-transform: translate3d(0, -100%, 0);220 transform: translate3d(0, -100%, 0);221 }222

223 to {224 opacity: 1;225 -webkit-transform: translate3d(0, 0, 0);226 transform: translate3d(0, 0, 0);227 }228 }229

230 @keyframes fadeInDown {231 from{232 opacity: 0;233 -webkit-transform: translate3d(0, -100%, 0);234 transform: translate3d(0, -100%, 0);235 }236

237 to {238 opacity: 1;239 -webkit-transform: translate3d(0, 0, 0);240 transform: translate3d(0, 0, 0);241 }242 }243

244 .fadeInDown {245 -webkit-animation-name: fadeInDown;246 animation-name: fadeInDown;247 }248

249 .mask {250 display: none;251 position: fixed;252 top: 0;253 bottom: 0;254 left: 0;255 right: 0;256 z-index: 1;257 background-color: rgba(0, 0, 0, 0.5);258 }259

260 @-webkit-keyframes fadeOutDown {261 from{262 opacity: 1;263 }264

265 to {266 opacity: 0;267 -webkit-transform: translate3d(0, 100%, 0);268 transform: translate3d(0, 100%, 0);269 }270 }271

272 @keyframes fadeOutDown {273 from{274 opacity: 1;275 }276

277 to {278 opacity: 0;279 -webkit-transform: translate3d(0, 100%, 0);280 transform: translate3d(0, 100%, 0);281 }282 }283

284 .fadeOutDown {285 -webkit-animation-name: fadeOutDown;286 animation-name: fadeOutDown;287 }288

289

290

291

292 弹出

293

318

319

320 //写成标准的组件形式

321 (function(window, document) {322 //兼容性处理

323 function whichAnimationEvent() {324 vart,325 el = document.createElement("fakeelement");326

327 var animations ={328 "animation": "animationend",329 "OAnimation": "oAnimationEnd",330 "msAnimation":"msAnimationEnd",331 "WebkitAnimation": "webkitAnimationEnd"

332 }333

334 for (t inanimations) {335 if (el.style[t] !==undefined) {336 returnanimations[t];337 }338 }339 }340 //兼容性的过度结束事件

341 var animationEndEvent =whichAnimationEvent();342

343

344 //transform兼容

345 function whichTransform() {346 var el = document.createElement("fakeelement");347 var transforms = ["webkitTransform", "msTransform", "OTransform", "transform"];348

349 for (var t intransforms) {350 if (el.style[transforms[t]] !==undefined) {351 returntransforms[t];352 }353 }354 }355

356 //transition兼容性处理

357 function whichTransition() {358 var el = document.createElement("fakeelement");359 var transitions = ["transition", "OTransition", "WebkitTransition", "msTransition"];360

361 for (var t intransitions) {362 if (el.style[transitions[t]] !==undefined) {363 returntransitions[t];364 }365 }366 }367 //测试触发

368 var test = document.querySelector("#test");369 var content = document.querySelector(".content"),370 mask = document.querySelector(".mask"),371 INITL = 68;372

373 test.addEventListener("click", function() {374

375 content.style.display = "block";376 mask.style.display = "block";377 content.classList.remove("fadeOutDown");378 content.classList.add("fadeInUp");379 mask.classList.remove("fadeOut");380 mask.classList.add("fadeIn");381

382 })383

384 //避免默认事件

385 document.addEventListener('touchmove', function(e) {386 e.preventDefault();387 }, { passive: false});388

389 var box = document.getElementById('dataBox'),390 data = document.getElementById("data"),391 startY = 0,392 endY = 0,393 transformX = 0,394 h = parseInt(window.getComputedStyle(document.getElementById("data").children[0], false).height),395 n = document.getElementById("data").children.length;396

397

398 //初始化高度

399 function init(y) {400 data.style =`transform: translate3d(0px, ${y}px, 0px)`;401 }402 init(INITL);403

404 //开始滑动

405 box.addEventListener("touchstart", function(e) {406 console.log(data.style.transform);407 startY = e.touches[0].pageY;408 transformX = data.style.transform.match(/translate3d\((-?\d+)px,\s*(-?\d+)px,\s*(\d+)px\)/i)[2] ? data.style.transform.match(/translate3d\((-?\d+)px,\s*(-?\d+)px,\s*(\d+)px\)/i)[2] : 0;409

410 });411 //滑动

412 box.addEventListener("touchmove", function(e) {413

414 var offsetY = e.touches[0].pageY -startY;415 data.style[whichTransform()] = `translate3d(0,${parseInt(offsetY)+parseInt(transformX)}px,0)`;416 data.style[whichTransition()] = '100ms ease-out';417

418 })419 //结束滑动

420 box.addEventListener("touchend", function(e) {421 transformX = data.style.transform.match(/translate3d\((-?\d+)px,\s*(-?\d+)px,\s*(\d+)px\)/i)[2] ? data.style.transform.match(/translate3d\((-?\d+)px,\s*(-?\d+)px,\s*(-?\d+)px\)/i)[2] : 0;422

423 if (transformX >INITL) {424 transformX =INITL;425 }426

427 if (transformX < -(n - Math.round(INITL / h) - 1) *h) {428 transformX = -(n - Math.round(INITL / h) - 1) *h;429 }430 var dis = Math.round(transformX / h) *h;431

432 data.style[whichTransform()] = `translate3d(0,${dis}px,0)`;433 data.style[whichTransition()] = '300ms ease-out';434 [].slice.apply(data.children).forEach(function(val, index) {435 val.classList.remove("active");436 })437

438 data.children[Math.round(Math.abs(transformX - INITL) / h)].classList.add("active");439

440 })441

442 var finish = document.getElementById("finish");443 var cancel = document.querySelector(".cancel");444

445 //点击完成

446 finish.addEventListener("click", function() {447 alert(data.querySelector(".active").innerHTML);448 })449

450 //点击取消

451 cancel.addEventListener("click", function() {452

453 content.classList.remove("fadeInUp");454 content.classList.add("fadeOutDown");455 mask.classList.remove("fadeIn");456 mask.classList.add("fadeOut");457

458 })459

460 //从block到none的过渡处理

461 content.addEventListener(animationEndEvent, function() {462 if (content.classList.contains('fadeOutDown')) {463 content.style.display = "none";464 }465 });466 mask.addEventListener(animationEndEvent, function() {467 if (mask.classList.contains('fadeOut')) {468 mask.style.display = "none";469 }470 });471 })(window, document);472

473

474

475