apicloud （第六篇 弹出底部菜单(多选、单选)）

1、首先引入apicloud 框架的 UIMultiSelector 模块。

（*请仔细阅读：文档地址：https://docs.apicloud.com/Client-API/UI-Layout/UIMultiSelector）

// 示例代码

var UIMultiSelector = api.require('UIMultiSelector');  //引入 UIMultiSelector;

// 打开  打开选择器  open({params}, callback(ret));
UIMultiSelector.open({

           //（可选项）模块的位置及尺寸;
            rect: {
                h: 244,
            },

           //（可选项）模块相应文字设置;
            text: {
                title: '企业标签',
                leftBtn: '取消',
                rightBtn: '确定',
                selectAll: '全选'
            },

            max: 3,   //最多允许同时选中的项数；当值为 0 时可选中所有项;

            singleSelection: false,     // true  为单选，自动忽略上方的max;

            maskClose: true, //（可选项）用户点击遮罩层（选择器以外的区域）时，是否关闭选择器 默认为true;
           
           //（可选项）模块的样式设置
            styles: {
                bg: '#fff',
                mask: 'rgba(0,0,0,0.3)',
                //mask: 'rgba(100,100,100,0.4)',
                title: {
                    bg: 'rgba(255,255,255,1)',
                    color: 'rgb(0,0,0)',
                    size: 16,
                    h: 44
                },
                leftButton: {
                    w: 80,
                    h: 35,
                    marginT: 5,
                    marginL: 8,
                    color: 'rgba(64,131,255,1)',
                    bg: 'rgba(255,255,255,1)',
                    size: 15,
                },
                rightButton: {
                    w: 80,
                    h: 35,
                    marginT: 5,
                    marginR: 8,
                    color: 'rgba(255,255,255,1)',
                    bg: 'rgba(27,133,255,1)',
                    size: 15,
                },
                item: {
                    h: 55,
                    bg: '#fff',
                    // bgActive: '#ffd40d',
                    // bgHighlight: '#ffd40d',
                    color: 'rgba(102,102,102,1)',
                    active: 'rgba(27,133,255,1)',
                    highlight: 'rgb(255,255,255)',
                    size: 14,
                    lineColor: 'rgba(229,229,229,1)',
                    textAlign: 'center',
                },
            },
            animation: false, // （可选项）打开关闭时是否显示滑入滑出动画,默认为true ; 

            items: data_con_list  // 选择器的数据 格式如下：
            items: [{
               text: 'Monday',    // 字符串类型；选项的文字内容 

               status: 'normal'
               // 字符串类型；选项状态，取值范围如下；默认：normal
               // normal：未选中
               //selected：已选中
               //disable：不可选中
               //forever：不可取消

           }, {
               text: 'Tuesday',
               status: 'normal'
           }, {
               text: 'Wednesday',
               status: 'normal'
           }, {
               text: 'Thursday',
               status: 'normal'
          }], 

        }, function(ret, err) {
            if (ret.eventType == 'clickLeft' || ret.eventType == 'clickRight') {
                UIMultiSelector.hide();
            }
            if (ret.eventType == 'clickItem') { 

              // 举例： ret.eventType == 'clickRight' ，当选完选项，还需点击右上角‘确定’才会 
              执行下方代码 （可根据实际情况调整）

                value = ret.items;

                console.log(value) // 选中的值，可以给input赋值等;

            }
        });

2、效果如下：

3、关闭选择器

// 关闭 关闭选择器（从内存清除）
var multiSelector = api.require('UIMultiSelector'); 

UIMultiSelector.close(); 

4、隐藏选择器

// 隐藏选择器（并未从内存清除）
var multiSelector = api.require('UIMultiSelector'); 

UIMultiSelector.hide(); 

5、显示已隐藏的选择器

// 显示已隐藏的选择器
var multiSelector = api.require('UIMultiSelector'); 

UIMultiSelector.show(); 

 

*有问题欢迎留言