mobiscroll.js插件的简单配置

最新推荐文章于 2025-05-18 16:49:17 发布

sunshine08_07

最新推荐文章于 2025-05-18 16:49:17 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：手机端插件

本文链接：https://blog.youkuaiyun.com/sunshine08_07/article/details/79729666

手机端插件专栏收录该内容

1 篇文章

订阅专栏

本文介绍Mobiscroll.js插件，一款适用于移动端的强大工具，可在H5页面上实现类似安卓和iOS的效果。文中提供了如何自定义主题、配置日期选择器及树形列表的具体示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

mobiscroll.js插件是一款应用在手机端功能强大的插件。可以在h5页面实现模仿安卓和ios手机上面的效果。

1、可自定义主题，官网有很多主题可以自己定义，然后下载。

2、js配置（日期配置）

<script>
    var theme = "ios";//这里可以选择不同的主题风格，主题不同，相对应引用的js也不同
    var mode = "scroller";
    var display = "bottom";
    var lang="zh";
    $('#demo_date').mobiscroll().date({
        theme: theme,
        mode: mode,
        display: display,
        lang: lang,
        dateFormat:"yyyy-mm",
        setText: '确定',
        minDate: new Date(2017,1),
        maxDate: new Date(2018,12),
        dateOrder: 'yymm',//弹层显示日期
        stepMinute: 1,
        height: 80
    });
</script>

引用的是

<script src="./js/mobiscroll.custom.min.js"></script>

3、js配置（treelist配置）

<div class="section">
                <ul id="car_select" data-type="treeList" style="display: none;">
                    <li>
                        <span>2017</span>
                        <ul>
                            <li>第一季度</li>
                            <li>第二季度</li>
                            <li>第三季度</li>
                            <li>第四季度</li>
                        </ul>
                    </li>
                    <li>
                        <span>2018</span>
                        <ul>
                            <li>第一季度</li>
                            <li>第二季度</li>
                            <li>第三季度</li>
                            <li>第四季度</li>
                        </ul>
                    </li>
                </ul>
            </div>

$('#car_select').mobiscroll().treelist({
        theme: 'android-ics light',
        mode: 'scroller',
        display: 'bottom',
        lang: 'zh',
        cancelText: null,
        headerText: '按季度查看',
        height: 80,//每个元素的高度

        setText: '确定', //确认按钮名称

        cancelText: '取消',//取消按钮名籍我搜索


        formatResult: function (array) {          
          return  $("#car_select_dummy").val()//回显到input
        }
    });

注：安卓风格和ios风格引用的不是同一个css

<link rel="stylesheet" href="./css/mobiscroll-2.13.2.full.min.css">//安卓风格的css

<link rel="stylesheet" href="./css/mobiscroll.custom.min.css">//ios风格的css