關於MobileSelect.js的使用

• MobileSelect.js

  一款移動端聯動插件，支持單選、多選、多級級聯，常規我們用的比較多的是，實現非聯動單選、非聯動雙選、聯動雙選

• 非聯動單選

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

<div id="btn1">
<script type="text/javascript">
var mobileSelect1 = new MobileSelect({
    trigger: '#btn1', 
    title: '非聯動單選',  
    wheels: [
                {data:['週日','週一','週二','週三','週四','週五','週六']}
            ],
});
</script>

效果如下：

• 非聯動雙選

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

<div id="btn2">
<script type="text/javascript">
var mobileSelect1 = new MobileSelect({
    trigger: '#btn2', 
    title: '非聯動雙選',  
    wheels: [
                {data:[
                    {id:'1',value:'週一'},
                    {id:'2',value:'週二'},
                    {id:'3',value:'週三 '},
                    {id:'4',value:'週四'},
                    {id:'5',value:'週五'},
                    {id:'6',value:'週六'},
                    {id:'6',value:'週日'}
                ]},
                {data:[
                    {id:'1',value:'上課'},
                    {id:'2',value:'吃飯'},
                    {id:'3',value:'看電影'},
                    {id:'4',value:'跑步'},
                    {id:'5',value:'攝像'}
                ]}
            ],
});
</script>

效果如下：

• 聯動雙選

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

<div id="btn2">
<script type="text/javascript">
var mobileSelect1 = new MobileSelect({
    trigger: '#btn3', 
    title: '聯動雙選',  
   wheels: [
    {data:[
            {
                id:'1',
                value:'附近',
                childs:[
                    {id:'1',value:'一公里'},
                    {id:'2',value:'二公里'},
                    {id:'3',value:'三公里'},
                ]
            },
                {id:'2',value:'雨花區'},
                {id:'3',value:'嶽麓區'},
                {id:'4',value:'芙蓉區'},
            ]}
        ],
});
</script>

效果如下：

• 圈個重點：

• 今日需求：如非聯動單選圖，但需要一行顯示兩個數據，一個靠左一個靠右

• 最優解決思路：直接在引入的js需要傳入的數據中修改

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

<div id="btn1">
<script type="text/javascript">
var mobileSelect1 = new MobileSelect({
    trigger: '#btn1', 
    title: '請選擇遊戲角色',  
    wheels: [
                {data:hero}, //hero爲數組對象
            ],
});
</script>

//另一個js文件中
<script>
 hero.value = '<div style="width:100%;display:flex"><span style="flex:1">'+ game.name+'</span><span style="flex:1">'+game.time+'</span></div>'
//game是從後臺獲取的數據，game.name和game.time是所需要展示的兩個數據
</script>