MuiPicker - 完美的移动端多级联选择器控件

发布时间：2023-05-20

在移动端开发中，我们往往需要让用户从多个层级中选择某个特定的选项，这时候用到的就是多级联选择器。MuiPicker是一个非常好用的多级联选择器控件，它通过简单的配置就能够方便地实现一个完全符合需求的多级联选择器。本文将从以下几个方面对MuiPicker进行详细介绍，包括基本用法、使用方法的几个注意点、常用的配置项、以及自定义模板等。

一、基本用法

先来看一下基本的用法是怎样的。首先引入所需的js和css文件：

<link rel="stylesheet" href="mui.picker.min.css">
<link rel="stylesheet" href="mui.picker.min.css">

然后在html代码里写上如下代码：

<input type="text" id="picker">

在JS代码里初始化一个picker对象，然后设置其data属性：

var picker = new mui.PopPicker();
picker.setData([
    {
        value: '1',
        text: '选项1'
    },
    {
        value: '2',
        text: '选项2'
    },
    {
        value: '3',
        text: '选项3'
    }
]);
// 给输入框添加事件监听，点击后弹出picker
document.getElementById('picker').addEventListener('tap', function() {
    picker.show(function(items) {
        // items[0].value: 选中的value值
        // items[0].text: 选中的文本值
    });
});

对于多级联选择，只需要在setData中传入一个数组，数组中每个元素都是一个对象，对象中包含value和text等属性：

picker.setData([
    {
        value: '1',
        text: '选项1',
        children: [
            {
                value: '11',
                text: '选项1-1'
            },
            {
                value: '12',
                text: '选项1-2'
            }
        ]
    },
    {
        value: '2',
        text: '选项2',
        children: [
            {
                value: '21',
                text: '选项2-1'
            },
            {
                value: '22',
                text: '选项2-2'
            }
        ]
    },
    {
        value: '3',
        text: '选项3',
        children: [
            {
                value: '31',
                text: '选项3-1'
            }
        ]
    }
]);

二、使用方法的几个注意点

1.数据源改变后需要重新初始化

在设置完数据源之后，如果数据源发生了改变，需要重新初始化picker，例如：

picker.setData(newData);
picker.pickers[0].setSelectedIndex(0, 100);

2.多选模式下需要设定最大可选数量

覆盖对象上的选项最大值，可自由穿梭。

picker = new mui.PopPicker({
    layer: 2
});
// 选项数据 source
picker.setData([{
    value: '01',
    text: '贵州省',
    children: [{
        value: "0101",
        text: "贵阳市",
        children: [{
            value: "001",
            text: "白云区"
        }]
    }]
}]);
// 允许多选模式
picker.pickers[0].setOption("isMultiSelect", true);
// 开启多选模式
picker.show(function(items) {
    var selectedItems = picker.getSelectedItems();
    console.log(selectedItems);
    alert(selectedItems.length + " items selected");
});

3.点击遮罩层关闭picker

在picker出现时，给遮罩层添加事件监听，当点击遮罩层时关闭picker:

picker.show(function(items) {
    // ...
});
var mask = mui.createMask(function() {
    picker.dispose();
});
mask.show();

三、常用的配置项

1.value

picker的默认值，可以是一个字符串也可以是一个数组。

picker.pickers[0].setSelectedValue("1", 1000);

2.width

控件宽度。

picker = new mui.PopPicker({
    layer: 2,
    width: "50%"
});

3.height

控件高度。

picker = new mui.PopPicker({
    layer: 2,
    height: '200px'
});

4.title

picker顶部的标题。

picker = new mui.PopPicker({
    layer: 2,
    title: '请选择地区'
});

5.buttons

picker顶部的按钮，参考mui的"buttons"对象设置。

picker = new mui.PopPicker({
    layer: 2,
    buttons: ['取消', '确定']
});

6.onChange

在选中项改变时触发的回调函数。

picker = new mui.PopPicker({
    layer: 2,
    onChange: function(picker, selectedIndex, selectedValue) {
        console.log(selectedIndex, selectedValue);
    }
});

四、自定义模板

在使用MuiPicker的过程中，我们也可以根据自己的需求来自定义选择器的外观。具体而言，我们可以通过改变模板的方式，来实现外观的不同。以下为一个自定义模板的示例：

<div id="custom-picker">
    <div class="mui-poppicker-header">
        <button class="mui-btn mui-poppicker-btn-cancel mui-action-back">取消</button>
        <h4 class="mui-poppicker-title">自定义标题</h4>
        <button class="mui-btn mui-poppicker-btn-ok mui-action-forward">确认</button>
    </div>
    <div class="mui-poppicker-body">
        <div class="mui-poppicker-body-content">
            <div class="custom-picker-list first-list">
                <ul>
                    <li class="mui-table-view-cell">北京</li>
                    <li class="mui-table-view-cell">上海</li>
                    <li class="mui-table-view-cell">广州</li>
                    <li class="mui-table-view-cell">深圳</li>
                    <li class="mui-table-view-cell">杭州</li>
                </ul>
            </div>
            <div class="custom-picker-list second-list">
                <ul>
                    <li class="mui-table-view-cell">东城区</li>
                    <li class="mui-table-view-cell">西城区</li>
                    <li class="mui-table-view-cell">朝阳区</li>
                    <li class="mui-table-view-cell">海淀区</li>
                    <li class="mui-table-view-cell">丰台区</li>
                </ul>
            </div>
        </div>
    </div>
</div>

通过以下代码来实现一个基于自定义模板的picker：

var customPicker = new mui.PopPicker({
    layer: 2
});
customPicker.setData([
    {
        value: '1',
        text: 'Custom'
    }
]);
document.getElementById('show-custom-picker-btn').addEventListener('tap', function(event) {
    customPicker.show(function(items) {
        console.log(items);
    });
    event.stopPropagation();
});

以上就是使用MuiPicker实现多级联选择器的详细内容，如果需要更多的细节和参数，请查看mui官方文档。

推荐文章