MuiPicker – 完美的移動端多級聯選擇器控制項

在移動端開發中，我們往往需要讓用戶從多個層級中選擇某個特定的選項，這時候用到的就是多級聯選擇器。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官方文檔。