向上爬的蜗牛
向上爬的蜗牛

mobiscroll实践：移动端仿苹果select效果的实现

最近在做一个微信服务号的开发，设计中日期选择和周期选择的输入框需要使用苹果的select下拉效果，在网上折腾了好久，最终的感慨就是这事基本上只有mobiscroll能搞定，然后专心死磕mobiscroll咯。
首先这个插件是需要收费的，官网提供15天的试用期，但是需要填写信用卡，随便编了几下结果没通过审核，只得作罢，在网上搜mobiscroll实践的博客，也是各种折腾各种坑。首先是大家用mobiscroll时都一定程度上的做了自己的封装，没有封装的就是一堆的js和css引用，一开始为了实现这个采用的方案里引入了将近十多个这个插件的js和css，而且还只是日期选择控件，还要做一个数字选择的控件我就无从下手了，于是又开始了从头的折腾，折腾久了发现mobiscroll还存在破解版，说到这，不得不佩服国内的破解事业啊。
发现有破解版后，便尝试了网上各个版本的破解版，最终采用的破解版的地址是：mobiscroll3.0 最新完整破解版，实现了如下的效果：

mobiscroll实践：移动端仿苹果select效果的实现_第1张图片

在线查看效果
demo代码

一开始接触mobiscroll可能对网上别人写的代码很不理解，但是只要在官网都花点功夫，使用起来还是很简单的，mobiscroll的官网文档特别的详细，当然了这个插件的功能也是特别的强大，我要用到的只是其中的一小部分而已。

日期选择功能在官网中的参数说明页：https://docs.mobiscroll.com/3-0-0_beta6/javascript/datetime

数字选择功能在官网中的参数说明页：https://docs.mobiscroll.com/3-0-0_beta6/number

使用mobiscroll最好是先到官网的demo页去选择自己需要的功能，然后就可以看到使用该功能的代码，自己copy下来，再去具体的功能参数页面查看参数，最后根据自己的需要通过审查元素等方式修改样式。
mobiscroll实践：移动端仿苹果select效果的实现_第2张图片
DEMO页

mobiscroll实践：移动端仿苹果select效果的实现_第3张图片
参数使用说明页

破解版就只有一个js和一个css文件了，因为具备了mobiscroll的所有功能，所以这两文件加起来有将近400kb。

还是贴一下demo的代码吧：


<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title>mobiscrolltitle>
    <link rel="stylesheet" href="./css/mobiscroll.custom-3.0.0-beta2.min.css">
    <script src="./js/jquery.min.js">script>
    <script src="./js/mobiscroll.custom-3.0.0-beta2.min.js">script>
    <style type="text/css">
        html,body{height:100%}
        body{margin:0;padding:10px;font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
        button{display:inline-block;text-decoration:none;padding:0.8em 2.6em;margin:20px 10px 0 0;outline:0;border:0;overflow:visible;cursor:pointer;color:#fff;background:#5185a8;font-family:Arial,sans-serif,verdana;font-size:14px;font-weight:100;-webkit-transition:background 0.3s ease-out;-moz-transition:background 0.3s ease-out;-o-transition:background 0.3s ease-out;transition:background 0.3s ease-out}
        button:hover{background:#34566d}
        input{width:100%;margin:0 0 10px 0;padding:10px;border:1px solid #ccc;border-radius:0;background:#fff;font-family:Arial,sans-serif,verdana;text-shadow:none;color:#000;font-size:15px;-webkit-appearance:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
        .demo-main-cont{height:100%}
        .mbsc-sc-itm{text-align:center !important}
    style>
head>
<body class="demo-main-cont demo-comp-number demo-display-bottom demo-theme-mobiscroll">
    <input id="date" placeholder="Please Select ..." />     
    <input id="integer" placeholder="Please Select ..." />  
    <script type="text/javascript">
    $(function () {
        var now = new Date(),
            min = new Date(now.getFullYear() - 4, now.getMonth(), now.getDate());
            max = new Date(now.getFullYear() + 4, now.getMonth(), now.getDate());
        var instance = mobiscroll.date('#date', {
            lang: 'zh',             //语言
            display: 'bottom',      //在页面的什么位置显示
            max: max,        //可供选择的最大日期
            min: min,        //可供选择的最小日期
            theme:'ios',     //主题，插件的皮肤效果，此处选择ios，为了模仿ios的select效果
            dateFormat:'yy-mm-dd'      //日期格式
        });

        var instance2 = mobiscroll.number('#integer', {
            lang: 'zh',
            display: 'bottom',
            layout: 'fixed',
            step: 1,        //前后数字差，可根据这个参数来设置2 4 6 8之类的数字选择
            min: 1,         //最小数字
            max: 50,        //最大数字
            width: 100,     
            defaultValue:28,    //刚显示出来时选择的数字
            theme:'ios'      //主题
        });
    });
    script>
body>
html>

为了实现这个效果花了一天多的时间，写这篇博客希望其他人少走弯路！

你可能感兴趣的:(web前端)