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
294
295
取消
296
请选择
297
完成
298
299
300
301
302
303
这是数据1
304
这是数据2
305
这是数据3
306
这是数据4
307
这是数据2
308
这是数据3
309
这是数据4
310
这是数据3
311
这是数据4
312
这是数据2
313
这是数据3
314
这是数据4
315
316
317
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
如果觉得《picker插件 vue 移动端_移动端的picker参考vux》对你有帮助，请点赞、收藏，并留下你的观点哦！
