• 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>

伸个爪子
6 声望0 粉丝