mobileSelect.js

最新版本下載地址[2017-09-21更新]：
https://github.com/onlyhom/mobileSelect.js
（寫給不熟悉github的同學：點選頁面右側的綠色按鈕【Clone or download】即可下載）
版本持續更新中，遇到有什麼bug或建議可以在Issues中提出來，我會在工作之餘盡力解答。

（遇到bug先不要著急，請先確認是否在github中下載的最新版本，有一些別的網站也收錄了這個外掛，但是版本滯後，一些新特性還沒有更新，以及存留著一些老bug。）

特性

• 原生js移動端選擇控制元件，不依賴任何庫
• 可傳入普通陣列或者json陣列
• 可根據傳入的引數長度，自動渲染出對應的列數，支援單項到多項選擇
• 自動識別是否級聯
• 選擇成功後，提供自定義回撥函式callback() 返回當前選擇索引位置、以及選擇的資料（陣列/json）
• 每次手勢滑動結束後，也提供一個回撥函式transitionEnd() 返回當前選擇索引位置、以及選擇的資料（陣列/json）
• 能夠在已經例項化控制元件後，提供update函式，傳其他引數再次渲染
• 提供重定位函式

演示

手機掃描二維碼預覽：

動態圖預覽：

引入

方式一 標籤引入：

<link rel="stylesheet" type="text/css"
 
 href="css/mobileSelect.css">
<script src="js/mobileSelect.js" type="text/javascript"></script>

方式二 npm：

npm install mobile-select -D

在你的js檔案中import：

import MobileSelect from 'mobile-select'

快速使用

①普通陣列格式-非聯動

<div id="trigger1"></div> <!--頁面中別漏了這個trigger-->
 


<script type="text/javascript">
var mobileSelect1 = new MobileSelect({
    trigger: '#trigger1', 
    title: '單項選擇',  
    wheels: [
                {data:['週日','週一','週二','週三','週四','週五','週六']}
            ],
    position:[2] //初始化定位
});
</script>

②json格式-非聯動

<div id="trigger2"></div>

<script type="text/javascript">
var mobileSelect2 = new MobileSelect({
    trigger: '#trigger2',
    title: '地區選擇',
    wheels: [
                {data:[
                    {id:'1',value:'附近'},
                    {id:'2',value:'上城區'},
                    {id:'3',value:'下城區'},
                    {id:'4',value:'江乾區'},
                    {id:'5',value:'拱墅區'},
                    {id:'6',value:'西湖區'}
                ]},
                {data:[
                    {id:'1',value:'1000米'},
                    {id:'2',value:'2000米'},
                    {id:'3',value:'3000米'},
                    {id:'4',value:'5000米'},
                    {id:'5',value:'10000米'}
                ]}
            ],
    callback:function(indexArr, data){
        console.log(data); //返回選中的json資料
    } 
});
</script>

效果圖：

③json格式-聯動

<div id="trigger3"></div>

<script type="text/javascript">
  var mobileSelect3 = new MobileSelect({
      trigger: '#trigger3',
      title: '地區選擇-聯動',
      wheels: [
                  {data:[
                      {
                          id:'1',
                          value:'附近',
                          childs:[
                              {id:'1',value:'1000米'},
                              {id:'2',value:'2000米'},
                              {id:'3',value:'3000米'},
                              {id:'4',value:'5000米'},
                              {id:'5',value:'10000米'}
                          ]
                      },
                      {id:'2',value:'上城區'},
                      {id:'3',value:'下城區'},
                      {id:'4',value:'江乾區'},
                      {id:'5',value:'拱墅區'},
                      {id:'6',value:'西湖區'}
                  ]}
              ],
      position:[0,1],
      callback:function(indexArr, data){
          console.log(data); //返回選中的json資料
      } 
  });
  </script>

效果圖：

④在vue-cli中如何使用

npm install mobile-select -D

<template>
    <div>
        <div id="trigger4">單項選擇</div>
    </div>
</template>

<script>
    import MobileSelect from 'mobile-select'

    export default {
        mounted() {
            var mobileSelect4 = new MobileSelect({
                trigger: "#trigger4",
                title: "單項選擇",
                wheels: [
                    {data: ["週日","週一","週二","週三","週四","週五","週六"]}
                ],
                callback:function(indexArr, data){
                    console.log(data);
                }
            });
        }
    }
</script>

⑤資料欄位名對映

<div id="trigger5"></div>

<script type="text/javascript">
    //假如你的資料的欄位名為id,title,children
    //與mobileSelect的id,value,childs欄位名不匹配
    //可以用keyMap屬性進行欄位名對映
    var mobileSelect5 = new MobileSelect({
        trigger: '#trigger5',
        title: '資料欄位名對映',
        wheels: [
                    {data:[
                        {
                            id:'1',
                            title:'A',
                            children:[
                                {id:'A1',title:'A-a'},
                                {id:'A2',title:'A-b'},
                                {id:'A3',title:'A-c'}
                            ]
                        },
                        {
                            id:'1',
                            title:'B',
                            children:[
                                {id:'B1',title:'B-a'},
                                {id:'B2',title:'B-b'},
                                {id:'B3',title:'B-c'}
                            ]
                        },
                    ]}
                ],
        keyMap: {
            id:'id',
            value: 'title',
            childs :'children'
        },         
        callback:function(indexArr, data){
            console.log(data);
        }
    });
</script>

引數

注：回撥函式中返回的引數含義如下

• indexArr是當前選中的索引陣列 如[0,0,1] 代表有三個輪子 選中的資料是第一個輪子的第0個數據、第二個輪子的第0個數據、第三個輪子的第1個數據
• data是當前選中的json資料 如[{id:’1’,value:’hello’},{id:’2’,value:’world’}]

功能函式：

注：功能函式中需要傳遞的引數含義如下

• sliderIndex 代表的是要修改的輪子的索引
• posIndex 代表位置索引

①功能函式demo：

<div id="day"></div>

var mySelect = new MobileSelect({
    trigger: '#day', 
    wheels: [
                {data:['週日','週一','週二','週三','週四','週五','週六']},
                {data:['08:00','09:00','10:00','11:00','12:00','13:00','14:00']}
            ],
    position:[1,1] //初始化定位 兩個輪子都選中在索引1的選項
});

//----------------------------------------------
//進行基礎的例項化之後，對例項用功能函式操作 

// mySelect.setTitle('啦啦啦(๑•̀ㅁ•́ฅ)'); 
// 設定控制元件的標題

// mySelect.updateWheel(0,['sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']);
// 更新第0個輪子的資料，資料變為英文的星期幾

// mySelect.locatePosition(1,0);
// 重新定位第1個輪子的位置，將第1個輪子的第0個數據改為當前選中。
// (第1個輪子是指右邊的輪子，左邊的輪子是第0個)

基礎例項 → 功能函式操作後

②ajax非同步填充資料demo

<!-- ************ 非級聯格式 ************ -->

<div id="trigger6"></div>

<script type="text/javascript">
    var mobileSelect6 = new MobileSelect({
        trigger: '#trigger6',
        title: 'ajax填充資料-非級聯',
        wheels: [
                    {data:[
                        {id:'1',value:'請選擇地區'},
                    ]},
                    {data:[
                        {id:'1',value:'請選擇距離'},
                    ]}
                ],        
        callback:function(indexArr, data){
            console.log(data);
        }
    });

    $.ajax({
        type: "POST",
        url: "xxxx",
        data: {},
        dataType: "json",
        success: function(res){
            //這裡假設獲取到的res.data.area為：
            // [
            //     {id:'1',value:'附近'},
            //     {id:'2',value:'福田區'},
            //     {id:'3',value:'羅湖區'},
            //     {id:'4',value:'南山區'}
            // ]

            //這裡假設獲取到的res.data.distance為：
            // [
            //     {id:'1',value:'200米'},
            //     {id:'2',value:'300米'},
            //     {id:'3',value:'400米'}
            // ]

            mobileSelect6.updateWheel(0, res.data.area); //更改第0個輪子
            mobileSelect6.updateWheel(1, res.data.distance); //更改第1個輪子
        }
    });
</script>
</script>




<!-- ************ 級聯格式 ************ -->

<div id="trigger7"></div>

<script type="text/javascript">
    var mobileSelect7 = new MobileSelect({
        trigger: '#trigger7',
        title: 'ajax填充資料-級聯',
        wheels: [
                    {data:[
                        {
                            id:'1',
                            value:'',
                            childs:[
                                {id:'A1',value:''},
                            ]
                        }
                    ]}
                ],        
        callback:function(indexArr, data){
            console.log(data);
        }
    });

    $.ajax({
        type: "POST",
        url: "xxxx",
        data: {},
        dataType: "json",
        success: function(res){
            //這裡假設獲取到的res.data為：
            // [{
            //     id:'1',
            //     value:'更新後資料',
            //     childs:[
            //         {id:'A1',value:'apple'},
            //         {id:'A2',value:'banana'},
            //         {id:'A3',value:'orange'}
            //     ]
            // }]
            mobileSelect7.updateWheels(res.data);
        }
    });
</script>

專案demo：

使用transitionEnd()、callback()、updateWheel()、locatePostion()函式實現如下功能：

• 選擇當天日期時，不得超過今天已過時辰。
• 選擇取車時間後，還車時間不得超過取車時間（包括日期和時間）。

許可證

Copyright (c) 2017-present, LIHONG OU(onlyhom)