参考vux移动端的ui组件，做了一个picker，测试在微信，uc主流浏览器能够正常工作。而在华为浏览器根本不能使用。而测试了vux的原有picker组件，发现在华为自带浏览器中，效果依然能够实现。

这时明白，原来vux也并非想的那么简单，兼容性这块做的很不错。或者是因为采用了vue的缘故？

实现代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>制作移动端的picker参考vux</title>

     <meta name="viewport" content="width=device-width,initial-scale=1.0">

     <style type="text/css">

     * {

         margin: ;

         padding: ;

     }

     .content {

         position: absolute;

         bottom: ;

         height: %;

         background: #fff;

         width: %;

         overflow: hidden;

         display: none;

         z-index:

     }

     .title {

         display: flex;

         justify-content: center;

         background-color: #fbf9fe;

     }

     .title div {

         height: 44px;

         display: flex;

         justify-content: center;

         padding-left: 10px;

         padding-right: 10px;

     }

     .tip {

         flex: ;

         align-items: center;

     }

     .cancel,

     .finish {

         width: 40px;

         align-items: center;

     }

     .cancel {

         color: #;

     }

     .finish {

         color: #FF9900;

     }

     .dataBox {

         position: relative;

         border-top: 1px solid #f1f2f3;

         display: flex;

         height: %;

         background: #f1f2f3;

         overflow: hidden;

         height: 170px;

     }

     .middle {

         position: absolute;

         width: %;

         height: 34px;

         left: ;

         top: 68px;

         z-index: ;

         background-image: linear-gradient(to bottom, #d0d0d0, #d0d0d0, transparent, transparent), linear-gradient(to top, #d0d0d0, #d0d0d0, transparent, transparent);

         background-position: top, bottom;

         background-size: % 1px;

         background-repeat: no-repeat;

     }

     .mengban {

         position: absolute;

         left: ;

         top: ;

         height: %;

         margin:  auto;

         width: %;

         z-index: ;

         transform: translateZ(0px);

         background-image: -webkit-linear-gradient(top, rgba(, , , 0.95), rgba(, , , 0.6)), -webkit-linear-gradient(bottom, rgba(, , , 0.95), rgba(, , , 0.6));

         background-image: linear-gradient(to bottom, rgba(, , , 0.95), rgba(, , , 0.6)), linear-gradient(to top, rgba(, , , 0.95), rgba(, , , 0.6));

         background-position: top, bottom;

         background-size: % 68px;

         background-repeat: no-repeat;

     }

     .data {

         position: absolute;

         left: ;

         top: ;

         width: %;

         z-index: ;

         webkit-transform: translateZ();

         -moz-transform: translateZ();

         -ms-transform: translateZ();

         -o-transform: translateZ();

         transform: translateZ();

     }

     .data div {

         text-align: center;

         font-size: 16px;

         height: 34px;

         line-height: 34px;

         color: #;

     }

     .active {

         color: red !important;

     }

     @-webkit-keyframes fadeInUp {

         from {

             opacity: ;

             -webkit-transform: translate3d(, %, );

             transform: translate3d(, %, );

         }

         to {

             opacity: ;

             -webkit-transform: translate3d(, , );

             transform: translate3d(, , );

         }

     }

     @keyframes fadeInUp {

         from {

             opacity: ;

             -webkit-transform: translate3d(, %, );

             transform: translate3d(, %, );

         }

         to {

             opacity: ;

             -webkit-transform: translate3d(, , );

             transform: translate3d(, , );

         }

     }

     .fadeInUp {

         -webkit-animation-name: fadeInUp;

         animation-name: fadeInUp;

     }

     .animated {

         -webkit-animation-duration: 1s;

         animation-duration: 1s;

         -webkit-animation-fill-mode: both;

         animation-fill-mode: both;

     }

     @-webkit-keyframes fadeIn {

         from {

             opacity: ;

         }

         to {

             opacity: ;

         }

     }

     @keyframes fadeIn {

         from {

             opacity: ;

         }

         to {

             opacity: ;

         }

     }

     .fadeIn {

         -webkit-animation-name: fadeIn;

         animation-name: fadeIn;

     }

     @-webkit-keyframes fadeOut {

         from {

             opacity: ;

         }

         to {

             opacity: ;

             display: none;

         }

     }

     @keyframes fadeOut {

         from {

             opacity: ;

         }

         to {

             opacity: ;

         }

     }

     .fadeOut {

         -webkit-animation-name: fadeOut;

         animation-name: fadeOut;

     }

     @-webkit-keyframes fadeInDown {

         from {

             opacity: ;

             -webkit-transform: translate3d(, -%, );

             transform: translate3d(, -%, );

         }

         to {

             opacity: ;

             -webkit-transform: translate3d(, , );

             transform: translate3d(, , );

         }

     }

     @keyframes fadeInDown {

         from {

             opacity: ;

             -webkit-transform: translate3d(, -%, );

             transform: translate3d(, -%, );

         }

         to {

             opacity: ;

             -webkit-transform: translate3d(, , );

             transform: translate3d(, , );

         }

     }

     .fadeInDown {

         -webkit-animation-name: fadeInDown;

         animation-name: fadeInDown;

     }

     .mask {

         display: none;

         position: fixed;

         top: ;

         bottom: ;

         left: ;

         right: ;

         z-index: ;

         background-color: rgba(, , , 0.5);

     }

     @-webkit-keyframes fadeOutDown {

         from {

             opacity: ;

         }

         to {

             opacity: ;

             -webkit-transform: translate3d(, %, );

             transform: translate3d(, %, );

         }

     }

     @keyframes fadeOutDown {

         from {

             opacity: ;

         }

         to {

             opacity: ;

             -webkit-transform: translate3d(, %, );

             transform: translate3d(, %, );

         }

     }

     .fadeOutDown {

         -webkit-animation-name: fadeOutDown;

         animation-name: fadeOutDown;

     }

     </style>

 </head>

 <body>

     <button id="test">弹出</button>

     <div class="content animated">

         <div class="title">

             <div class="cancel">取消</div>

             <div class="tip">请选择</div>

             <div class="finish" id="finish">完成</div>

         </div>

         <div class="dataBox" id="dataBox">

             <div class="middle"></div>

             <div class="mengban"></div>

             <div class="data" id="data">

                 <div class="active">这是数据1</div>

                 <div>这是数据2</div>

                 <div>这是数据3</div>

                 <div>这是数据4</div>

                 <div>这是数据2</div>

                 <div>这是数据3</div>

                 <div>这是数据4</div>

                 <div>这是数据3</div>

                 <div>这是数据4</div>

                 <div>这是数据2</div>

                 <div>这是数据3</div>

                 <div>这是数据4</div>

             </div>

         </div>

     </div>

     <div class="mask animated"></div>

     <script type="text/javascript">

     //写成标准的组件形式

     (function(window, document) {

         //兼容性处理

         function whichAnimationEvent() {

             var t,

                 el = document.createElement("fakeelement");

             var animations = {

                 "animation": "animationend",

                 "OAnimation": "oAnimationEnd",

                 "msAnimation":"msAnimationEnd",

                 "WebkitAnimation": "webkitAnimationEnd"

             }

             for (t in animations) {

                 if (el.style[t] !== undefined) {

                     return animations[t];

                 }

             }

         }

         //兼容性的过度结束事件

         var animationEndEvent = whichAnimationEvent();

         //transform兼容

         function whichTransform() {

             var el = document.createElement("fakeelement");

             var transforms = ["webkitTransform", "msTransform", "OTransform", "transform"];

             for (var t in transforms) {

                 if (el.style[transforms[t]] !== undefined) {

                     return transforms[t];

                 }

             }

         }

          //transition兼容性处理

         function whichTransition() {

             var el = document.createElement("fakeelement");

             var transitions = ["transition", "OTransition", "WebkitTransition", "msTransition"];

             for (var t in transitions) {

                 if (el.style[transitions[t]] !== undefined) {

                     return transitions[t];

                 }

             }

         }

         //测试触发

         var test = document.querySelector("#test");

         var content = document.querySelector(".content"),

             mask = document.querySelector(".mask"),

             INITL = ;

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

             content.style.display = "block";

             mask.style.display = "block";

             content.classList.remove("fadeOutDown");

             content.classList.add("fadeInUp");

             mask.classList.remove("fadeOut");

             mask.classList.add("fadeIn");

         })

         //避免默认事件

         document.addEventListener('touchmove', function(e) {

             e.preventDefault();

         }, { passive: false });

         var box = document.getElementById('dataBox'),

             data = document.getElementById("data"),

             startY = ,

             endY = ,

             transformX = ,

             h = parseInt(window.getComputedStyle(document.getElementById("data").children[], false).height),

             n = document.getElementById("data").children.length;

         //初始化高度

         function init(y) {

             data.style = `transform: translate3d(0px, ${y}px, 0px)`;

         }

         init(INITL);

         //开始滑动

         box.addEventListener("touchstart", function(e) {

             console.log(data.style.transform);

             startY = e.touches[].pageY;

             transformX = data.style.transform.match(/translate3d\((-?\d+)px,\s*(-?\d+)px,\s*(\d+)px\)/i)[] ? data.style.transform.match(/translate3d\((-?\d+)px,\s*(-?\d+)px,\s*(\d+)px\)/i)[] : ;

         });

         //滑动

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

             var offsetY = e.touches[].pageY - startY;

             data.style[whichTransform()] = `translate3d(,${parseInt(offsetY)+parseInt(transformX)}px,)`;

             data.style[whichTransition()] = '100ms ease-out';

         })

         //结束滑动

         box.addEventListener("touchend", function(e) {

             transformX = data.style.transform.match(/translate3d\((-?\d+)px,\s*(-?\d+)px,\s*(\d+)px\)/i)[] ? data.style.transform.match(/translate3d\((-?\d+)px,\s*(-?\d+)px,\s*(-?\d+)px\)/i)[] : ;

             if (transformX > INITL) {

                 transformX = INITL;

             }

             if (transformX < -(n - Math.round(INITL / h) - ) * h) {

                 transformX = -(n - Math.round(INITL / h) - ) * h;

             }

             var dis = Math.round(transformX / h) * h;

             data.style[whichTransform()] = `translate3d(,${dis}px,)`;

             data.style[whichTransition()] = '300ms ease-out';

             [].slice.apply(data.children).forEach(function(val, index) {

                 val.classList.remove("active");

             })

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

         })

         var finish = document.getElementById("finish");

         var cancel = document.querySelector(".cancel");

         //点击完成

         finish.addEventListener("click", function() {

             alert(data.querySelector(".active").innerHTML);

         })

         //点击取消

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

             content.classList.remove("fadeInUp");

             content.classList.add("fadeOutDown");

             mask.classList.remove("fadeIn");

             mask.classList.add("fadeOut");

         })

         //从block到none的过渡处理

         content.addEventListener(animationEndEvent, function() {

             if (content.classList.contains('fadeOutDown')) {

                 content.style.display = "none";

             }

         });

         mask.addEventListener(animationEndEvent, function() {

             if (mask.classList.contains('fadeOut')) {

                 mask.style.display = "none";

             }

         });

     })(window, document);

     </script>

 </body>

 </html>

滑动这块采用的是touch事件；

过渡效果利用的是css3的animation.css文件；

利用了一个以前没有应用的api：animationend，用来监控animation是否结束，结束后发生回调。

其它利用classlist对类进行增删。

做了一下兼容下，transform和transition的兼容性。

后面需要优化一下。

优化浏览器兼容性滑动。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>制作移动端的picker参考vux</title>

     <meta name="viewport" content="width=device-width,initial-scale=1.0">

     <style type="text/css">

     * {

         margin: ;

         padding: ;

     }

     .content {

         position: absolute;

         bottom: ;

         height: %;

         background: #fff;

         width: %;

         overflow: hidden;

         display: none;

         z-index:

     }

     .title {

         display: flex;

         justify-content: center;

         background-color: #fbf9fe;

     }

     .title div {

         height: 44px;

         display: flex;

         justify-content: center;

         padding-left: 10px;

         padding-right: 10px;

     }

     .tip {

         flex: ;

         align-items: center;

     }

     .cancel,

     .finish {

         width: 40px;

         align-items: center;

     }

     .cancel {

         color: #;

     }

     .finish {

         color: #FF9900;

     }

     .dataBox {

         position: relative;

         border-top: 1px solid #f1f2f3;

         display: flex;

         height: %;

         background: #f1f2f3;

         overflow: hidden;

         height: 170px;

     }

     .middle {

         position: absolute;

         width: %;

         height: 34px;

         left: ;

         top: 68px;

         z-index: ;

         background-image: linear-gradient(to bottom, #d0d0d0, #d0d0d0, transparent, transparent), linear-gradient(to top, #d0d0d0, #d0d0d0, transparent, transparent);

         background-position: top, bottom;

         background-size: % 1px;

         background-repeat: no-repeat;

     }

     .mengban {

         position: absolute;

         left: ;

         top: ;

         height: %;

         margin:  auto;

         width: %;

         z-index: ;

         transform: translateZ(0px);

         background-image: -webkit-linear-gradient(top, rgba(, , , 0.95), rgba(, , , 0.6)), -webkit-linear-gradient(bottom, rgba(, , , 0.95), rgba(, , , 0.6));

         background-image: linear-gradient(to bottom, rgba(, , , 0.95), rgba(, , , 0.6)), linear-gradient(to top, rgba(, , , 0.95), rgba(, , , 0.6));

         background-position: top, bottom;

         background-size: % 68px;

         background-repeat: no-repeat;

     }

     .data {

         position: absolute;

         left: ;

         top: ;

         width: %;

         z-index: ;

         webkit-transform: translateZ();

         -moz-transform: translateZ();

         -ms-transform: translateZ();

         -o-transform: translateZ();

         transform: translateZ();

     }

     .data div {

         text-align: center;

         font-size: 16px;

         height: 34px;

         line-height: 34px;

         color: #;

     }

     .active {

         color: red !important;

     }

     @-webkit-keyframes fadeInUp {

         from {

             opacity: ;

             -webkit-transform: translate3d(, %, );

             transform: translate3d(, %, );

         }

         to {

             opacity: ;

             -webkit-transform: translate3d(, , );

             transform: translate3d(, , );

         }

     }

     @keyframes fadeInUp {

         from {

             opacity: ;

             -webkit-transform: translate3d(, %, );

             transform: translate3d(, %, );

         }

         to {

             opacity: ;

             -webkit-transform: translate3d(, , );

             transform: translate3d(, , );

         }

     }

     .fadeInUp {

         -webkit-animation-name: fadeInUp;

         animation-name: fadeInUp;

     }

     .animated {

         -webkit-animation-duration: 1s;

         animation-duration: 1s;

         -webkit-animation-fill-mode: both;

         animation-fill-mode: both;

     }

     @-webkit-keyframes fadeIn {

         from {

             opacity: ;

         }

         to {

             opacity: ;

         }

     }

     @keyframes fadeIn {

         from {

             opacity: ;

         }

         to {

             opacity: ;

         }

     }

     .fadeIn {

         -webkit-animation-name: fadeIn;

         animation-name: fadeIn;

     }

     @-webkit-keyframes fadeOut {

         from {

             opacity: ;

         }

         to {

             opacity: ;

             display: none;

         }

     }

     @keyframes fadeOut {

         from {

             opacity: ;

         }

         to {

             opacity: ;

         }

     }

     .fadeOut {

         -webkit-animation-name: fadeOut;

         animation-name: fadeOut;

     }

     @-webkit-keyframes fadeInDown {

         from {

             opacity: ;

             -webkit-transform: translate3d(, -%, );

             transform: translate3d(, -%, );

         }

         to {

             opacity: ;

             -webkit-transform: translate3d(, , );

             transform: translate3d(, , );

         }

     }

     @keyframes fadeInDown {

         from {

             opacity: ;

             -webkit-transform: translate3d(, -%, );

             transform: translate3d(, -%, );

         }

         to {

             opacity: ;

             -webkit-transform: translate3d(, , );

             transform: translate3d(, , );

         }

     }

     .fadeInDown {

         -webkit-animation-name: fadeInDown;

         animation-name: fadeInDown;

     }

     .mask {

         display: none;

         position: fixed;

         top: ;

         bottom: ;

         left: ;

         right: ;

         z-index: ;

         background-color: rgba(, , , 0.5);

     }

     @-webkit-keyframes fadeOutDown {

         from {

             opacity: ;

         }

         to {

             opacity: ;

             -webkit-transform: translate3d(, %, );

             transform: translate3d(, %, );

         }

     }

     @keyframes fadeOutDown {

         from {

             opacity: ;

         }

         to {

             opacity: ;

             -webkit-transform: translate3d(, %, );

             transform: translate3d(, %, );

         }

     }

     .fadeOutDown {

         -webkit-animation-name: fadeOutDown;

         animation-name: fadeOutDown;

     }

     </style>

 </head>

 <body>

     <button id="test">弹出</button>

     <div class="content animated">

         <div class="title">

             <div class="cancel">取消</div>

             <div class="tip">请选择</div>

             <div class="finish" id="finish">完成</div>

         </div>

         <div class="dataBox" id="dataBox">

             <div class="middle"></div>

             <div class="mengban"></div>

             <div class="data" id="data">

                 <div class="active">这是数据1</div>

                 <div>这是数据2</div>

                 <div>这是数据3</div>

                 <div>这是数据4</div>

                 <div>这是数据2</div>

                 <div>这是数据3</div>

                 <div>这是数据4</div>

                 <div>这是数据3</div>

                 <div>这是数据4</div>

                 <div>这是数据2</div>

                 <div>这是数据3</div>

                 <div>这是数据4</div>

             </div>

         </div>

     </div>

     <div class="mask animated"></div>

     <script type="text/javascript">

     //写成标准的组件形式

     (function(window, document) {

         //兼容性处理

         var elementStyle = document.createElement('div').style;

         var vendor = function() {

             var transformNames = {

                 webkit: 'webkitTransform',

                 Moz: 'MozTransform',

                 O: 'OTransform',

                 ms: 'msTransform',

                 standard: 'transform'

             };

             for (var key in transformNames) {

                 if (elementStyle[transformNames[key]] !== undefined) {

                     return key;

                 }

             }

             return false;

         }();

         function prefixStyle(style) {

             if (vendor === false) {

                 return false;

             }

             if (vendor === 'standard') {

                 if (style === 'transitionEnd') {

                     return 'transitionend';

                 }

                 if(style==="animationEnd"){

                     return 'animationEnd';

                 }

                 return style;

             }

             return vendor + style.charAt().toUpperCase() + style.substr();

         }

         //测试触发

         var test = document.querySelector("#test");

         var content = document.querySelector(".content"),

             mask = document.querySelector(".mask"),

             INITL = ;

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

             content.style.display = "block";

             mask.style.display = "block";

             content.classList.remove("fadeOutDown");

             content.classList.add("fadeInUp");

             mask.classList.remove("fadeOut");

             mask.classList.add("fadeIn");

         })

         //避免默认事件

         document.addEventListener('touchmove', function(e) {

             e.preventDefault();

         }, { passive: false });

         var box = document.getElementById('dataBox'),

             data = document.getElementById("data"),

             startY = ,

             endY = ,

             transformX = ,

             h = parseInt(window.getComputedStyle(document.getElementById("data").children[], false).height),

             n = document.getElementById("data").children.length;

         //初始化高度

         function init(y) {

             data.style = `transform: translate3d(0px, ${y}px, 0px)`;

         }

         init(INITL);

         //开始滑动

         box.addEventListener("touchstart", function(e) {

             console.log(data.style.transform);

             startY = e.touches[].pageY;

             transformX = data.style.transform.match(/translate3d\((-?\d+)px,\s*(-?\d+)px,\s*(\d+)px\)/i)[] ? data.style.transform.match(/translate3d\((-?\d+)px,\s*(-?\d+)px,\s*(\d+)px\)/i)[] : ;

         });

         //滑动

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

             var offsetY = e.touches[].pageY - startY;

             data.style[prefixStyle("transform")] = `translate3d(,${parseInt(offsetY)+parseInt(transformX)}px,)`;

             data.style[prefixStyle("transition")] = '100ms ease-out';

         })

         //结束滑动

         box.addEventListener("touchend", function(e) {

             transformX = data.style.transform.match(/translate3d\((-?\d+)px,\s*(-?\d+)px,\s*(\d+)px\)/i)[] ? data.style.transform.match(/translate3d\((-?\d+)px,\s*(-?\d+)px,\s*(-?\d+)px\)/i)[] : ;

             if (transformX > INITL) {

                 transformX = INITL;

             }

             if (transformX < -(n - Math.round(INITL / h) - ) * h) {

                 transformX = -(n - Math.round(INITL / h) - ) * h;

             }

             var dis = Math.round(transformX / h) * h;

             data.style[prefixStyle("transform")] = `translate3d(,${dis}px,)`;

             data.style[prefixStyle("transition")] = '300ms ease-out';

             [].slice.apply(data.children).forEach(function(val, index) {

                 val.classList.remove("active");

             })

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

         })

         var finish = document.getElementById("finish");

         var cancel = document.querySelector(".cancel");

         //点击完成

         finish.addEventListener("click", function() {

             alert(data.querySelector(".active").innerHTML);

         })

         //点击取消

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

             content.classList.remove("fadeInUp");

             content.classList.add("fadeOutDown");

             mask.classList.remove("fadeIn");

             mask.classList.add("fadeOut");

         })

         //从block到none的过渡处理

         content.addEventListener(prefixStyle("animationEnd"), function() {

             if (content.classList.contains('fadeOutDown')) {

                 content.style.display = "none";

             }

         });

         console.log(prefixStyle("transitionend"));

         mask.addEventListener(prefixStyle("animationEnd"), function() {

             if (mask.classList.contains('fadeOut')) {

                 mask.style.display = "none";

             }

         });

     })(window, document);

     </script>

 </body>

 </html>

本文结束。

最新文章

  1. CentOS 7 下的LAMP实现以及基于https的虚拟主机
  2. 简单的freemarker解析测试
  3. NSDate使用
  4. sqlplus将查询结果重定向到文件，不输出到屏幕
  5. 菜鸟-手把手教你把Acegi应用到实际项目中(12)-Run-As认证服务
  6. Android端通过HttpURLConnection上传文件到服务器
  7. 淘宝JAVA中间件Diamond详解（一）---简介&amp;快速使用
  8. bzoj2426
  9. 【转】oracle数据库NUMBER数据类型
  10. angular cors跨域资源共享设置 和formdata设定
  11. 看了一个烟花的html作品 --引用：http://www.w3cfuns.com/blog-5444049-5404365.html
  12. Linux2.6--虚拟文件系统
  13. TextView走马灯
  14. LevelDB源码分析-Version
  15. mysql查询不区分大小写问题分析和解决
  16. [Shell]Shell脚本的执行方式
  17. 数据库事务的属性－ACID和隔离级别
  18. C#系列教程——对一个对象的装箱取消转换
  19. C++比较特殊的构造函数和初始化语法
  20. 木块问题（UVa101）

热门文章

  1. django-models 数据库取值
  2. Python(9-18天总结)
  3. sql server 对Geography 的增（insert）和查询（select）
  4. leetcode笔记9 Move Zeroes
  5. 腾讯WeTest开启“测试扶持计划”赠送重磅福利（含MTSC/TiD门票）
  6. python处理dict转json，字符串中存在空格问题，导致url编码时，存在多余字符
  7. JAVA基础学习之路（三）类定义及构造方法
  8. 拥抱移动端，jQueryui触控设备兼容插件
  9. LeetCode 135——分发糖果
  10. 《机器学习实战》笔记——决策树（ID3）