关于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>