mobiscroll實踐：移動端仿蘋果select效果的實現

阿新 • • 發佈：2019-01-09

最近在做一個微信服務號的開發，設計中日期選擇和週期選擇的輸入框需要使用蘋果的select下拉效果，在網上折騰了好久，最終的感慨就是這事基本上只有mobiscroll能搞定，然後專心死磕mobiscroll咯。
首先這個外掛是需要收費的，官網提供15天的試用期，但是需要填寫信用卡，隨便編了幾下結果沒通過稽核，只得作罷，在網上搜mobiscroll實踐的部落格，也是各種折騰各種坑。首先是大家用mobiscroll時都一定程度上的做了自己的封裝，沒有封裝的就是一堆的js和css引用，一開始為了實現這個採用的方案裡引入了將近十多個這個外掛的js和css，而且還只是日期選擇控制元件，還要做一個數字選擇的控制元件我就無從下手了，於是又開始了從頭的折騰，折騰久了發現mobiscroll還存在破解版，說到這，不得不佩服國內的破解事業啊。
發現有破解版後，便嘗試了網上各個版本的破解版，最終採用的破解版的地址是：

mobiscroll3.0 最新完整破解版，實現瞭如下的效果：

這裡寫圖片描述

一開始接觸mobiscroll可能對網上別人寫的程式碼很不理解，但是隻要在官網都花點功夫，使用起來還是很簡單的，mobiscroll的官網文件特別的詳細，當然了這個外掛的功能也是特別的強大，我要用到的只是其中的一小部分而已。

使用mobiscroll最好是先到官網的demo頁去選擇自己需要的功能，然後就可以看到使用該功能的程式碼，自己copy下來，再去具體的功能引數頁面檢視引數，最後根據自己的需要通過審查元素等方式修改樣式。
DEMO頁
DEMO頁

這裡寫圖片描述
引數使用說明頁

破解版就只有一個js和一個css檔案了，因為具備了mobiscroll的所有功能，所以這兩檔案加起來有將近400kb。

還是貼一下demo的程式碼吧：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title>mobiscroll</title>
    <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>
<!-- 更多date與Integer選擇引數請參見mobiscroll官網：
   https://docs.mobiscroll.com/3-0-0_beta6/javascript/datetime
   https://docs.mobiscroll.com/3-0-0_beta6/number
-->

為了實現這個效果花了一天多的時間，寫這篇部落格希望其他人少走彎路！

mobiscroll實踐：移動端仿蘋果select效果的實現

mobiscroll實踐：移動端仿蘋果select效果的實現

ui界面設計公司搜集精彩設計三十例：移動端APP界面設計欣賞之二

移動端二三事【二】：移動端觸摸事件點透及多種解決方案。

回顧2017系列篇（二）：移動端APP設計趨勢

第125天：移動端：空白字符問題解決辦法

第126天：移動端-原生實現響應式模態框

第133天：移動端開發的一些總結

前端性能優化（二）：移動端瀏覽器前端優化策略

核心技術解析：移動端車牌識別系統方案

MetaHandler.js：移動端適配各種螢幕

Hades：移動端靜態分析框架

vue 移動端仿hover事件

微信小程式入門（3）：移動端訪問PC

面試題：移動端1px邊框的樣式

千鋒HTML5高階教程：移動端WebApp及混合APP開發

Javascript小知識點（五）：移動端控制點選別的地方，隱藏頁面彈框

抓包工具Fiddler的使用教程（一）：移動端如何抓包

移動端仿釘釘打卡可以左右滑動的日曆

【MDCC專訪】劉昇平：移動端人工智慧最看好會話互動應用

奇淫技巧：移動端圖片處理，設定最大寬度，高度等比處理

mobiscroll實踐：移動端仿蘋果select效果的實現

相關推薦