js手機移動端選擇插件 mobileSelect.js

這是一款多功能的移動端滾動選擇器，支持單選到多選、支持多級級聯、提供自定義回調函數、提供update函數二次渲染、重定位函數、兼容pc端拖拽等等..

簡單粗暴:看演示

方式一 標簽引入：

<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

如何使用:

1.普通數組格式-非聯動

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

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

2.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>

3.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>

gitHub地址:https://github.com/onlyhom/mobileSelect.js 

更多使用方法,請參考https://blog.csdn.net/oulihong123/article/details/58327247