bs-ui-dropdownmenu v0.1.3

bs-ui-dropdownmenu

Base Readme

这个项目是从bs-ui-seed基础创建出来的. 请查看 base/README.md 来了解其基础内容.

名词解释

• 单层级：下拉选择中只存在一列选择
• 多层级：下拉选择中存在两列，需要先选择第一列，然后选择第二列数据

功能介绍

• 单层级下拉选择
• 多层级下拉选择
• 多数据格式支持
• 样式自定义
• 设置选中项
• 动态加载

使用方法

1. 安装

npm i bs - ui - dropdownmenu

2. app.json

  "usingComponents": {
      "bs-dropdownmenu": "miniprogram_npm/bs-ui-dropdownmenu/index"
  }

2. app.wxss

  @import 'miniprogram_npm/bs-ui-dropdownmenu/default.wxss';

3. .wxml

   使用时建议在外部使用一个view进行包装，并设置宽度和高度

      <view style='width100%;height:100rpx;'>
          <bs-dropdownmenu menu="{{menuArray}}" bind:menuchange="menuChange" bind:menuclick="menuClick" selected="{{selected}}" bind:shadeclosed="shadeClosed">
          </bs-dropdownmenu>
      </view>

4. .js

Page({
    data: {
        selected: [0, 0, [0, 0]],
    },
    onLoad() {
        let menuArray = [{
            "code": "typeCode",
            "name": "typeName",
            "list": [{
                "typeCode": 0,
                "typeName": "全部类型"
            }, {
                "typeCode": 1,
                "typeName": "价值客群趋势"
            }, {
                "typeCode": 2,
                "typeName": "游逛时长趋势"
            }, {
                "typeCode": 3,
                "typeName": "游逛深度趋势"
            }]
        }, {
            "code": "statusCode",
            "name": "statusName",
            "list": [{
                "statusCode": 0,
                "statusName": "全部趋势"
            }, {
                "statusCode": 1,
                "statusName": "连续两周上升"
            }, {
                "statusCode": 2,
                "statusName": "连续三周上升"
            }, {
                "statusCode": 3,
                "statusName": "连续两周下降"
            }, {
                "statusCode": 4,
                "statusName": "连续三周下降"
            }]
        }, {
            "code": "yearCode",
            "name": "yearName",
            "linkage": true,
            "list": [{
                "yearCode": "all",
                "yearName": "全部日期",
                "childs": {
                    "code": "timestamp",
                    "name": "weekName",
                    "list": [{
                        "weekCode": "全部日期",
                        "weekName": "全部日期",
                        "timestamp": "1558281600000"
                    }]
                }
            }, {
                "yearCode": "2019",
                "yearName": "2019",
                "childs": {
                    "code": "timestamp",
                    "name": "weekName",
                    "list": [{
                        "weekCode": "5月第3周",
                        "weekName": "5月第3周(5/20-5/26)",
                        "timestamp": "1558281600000"
                    }, {
                        "weekCode": "5月第2周",
                        "weekName": "5月第2周(5/13-5/19)",
                        "timestamp": "1557676800000"
                    }]
                }
            }, {
                "yearCode": "2018",
                "yearName": "2018",
                "childs": {
                    "code": "timestamp",
                    "name": "weekName",
                    "list": [{
                        "weekCode": "12月第5周",
                        "weekName": "12月第5周(12/31-1/6)",
                        "timestamp": "1546185600000"
                    }, {
                        "weekCode": "12月第4周",
                        "weekName": "12月第4周(12/24-12/30)",
                        "timestamp": "1545580800000"
                    }, {
                        "weekCode": "12月第3周",
                        "weekName": "12月第3周(12/17-12/23)",
                        "timestamp": "1544976000000"
                    }]
                }
            }]
        }]
        this.setData({
            menuArray
        })
    },
    // 接收组件头部点击区域和多层级第一级下拉列表的索引
    menuClick(event) {
        // event.detail的示例内容主要包含menuIndex（头部当前选中的索引）和subIndex（多层级第一级下拉列表选中的索引）,subIndex默认为-1，当下拉出现复选情况时，用户切换多层级第一级下拉列表的某一项，则会把当前项subIndex-1替换为我所选中项的索引下标，并返回
        const {
            menuIndex,
            subIndex
        } = event.detail
        let menuInfo = this.data.menuList[menuIndex]
        let menuListData = menuInfo.list;
        if (subIndex > -1) {
            menuInfo = this.data.menuList[menuIndex].list[subIndex]
            menuListData = menuInfo.childs;
        }
        if (!menuListData || menuListData.length == 0) {
            this.getMenuData({
                menuIndex,
                subIndex,
                menuInfo
            })
        }
    },
    //单独处理的方法，把每一项需要的操作统一到getMenuData这个方法（动态传参时）
    getMenuData(options) {
        //单层级
        helper.wx.showLoading();
        if (options.menuIndex == 0) {
            //do something
            //加载楼层（项目实际案例，请参考）
            // api.passenger.getFloorAll({
            //     dateType: 0
            // }).then(res => {
            //     if (res && res.floorInfoVoList && res.floorInfoVoList.length > 0) {
            //         res.floorInfoVoList.unshift({
            //             floorId: '',
            //             floorName: '全部楼层'
            //         })
            //         this.data.menuList[options.menuIndex].list = res.floorInfoVoList;
            //         this.setData({
            //             menuList: this.data.menuList
            //         });
            //     }
            // helper.wx.hideLoading();
            // }).catch(err => {
            //     console.log(err);
            //     helper.wx.hideLoading();
            // })
        } else {
            //do something
            //加载业态 （项目实际案例，请参考）
            // api.passenger.getBusinessAll({
            //     dateType: 0
            // }).then(res => {
            //     if (res && res.businessVoList && res.businessVoList.length > 0) {
            //         res.businessVoList.unshift({
            //             businessCode: '',
            //             businessName: '全部业态'
            //         })
            //         this.data.menuList[options.menuIndex].list = res.businessVoList;
            //         this.setData({
            //             menuList: this.data.menuList
            //         });
            //     }
            // helper.wx.hideLoading();
            // }).catch(err => {
            //     console.log(err);
            //     helper.wx.hideLoading();
            // })
        }
    },
    // 当点击遮罩层部分关闭dropdownmenu时需要页面调整的操作---例如：echart遮盖dropdownmenu时，可以在显示时让echart隐藏，当关闭时显示echart
    shadeClosed(event){
        console.log(event)
    },
    // 接收组件返回来的参数 
    menuChange(event) {
        console.log(event.detail);
        /* event.detail的示例内容，主要包含selectItem（当前选中的数据）和selectIndex（当前操作的列的索引）
      {
	"selectItem": [{
            "name": "价值客群趋势",
            "code": 1,
            "source": {
              "typeCode": 1,
              "typeName": "价值客群趋势"
            }
          }, {
            "name": "连续两周上升",
            "code": 1,
            "source": {
              "statusCode": 1,
              "statusName": "连续两周上升"
            }
          },
          [{
            "name": "2018",
            "code": "2018",
            "source": {
              "yearCode": "2018",
              "yearName": "2018",
              "childs": {
                "code": "timestamp",
                "name": "weekName",
                "list": [{
                  "weekCode": "12月第5周",
                  "weekName": "12月第5周(12/31-1/6)",
                  "timestamp": "1546185600000"
                }, {
                  "weekCode": "12月第4周",
                  "weekName": "12月第4周(12/24-12/30)",
                  "timestamp": "1545580800000"
                }, {
                  "weekCode": "12月第3周",
                  "weekName": "12月第3周(12/17-12/23)",
                  "timestamp": "1544976000000"
                }]
              }
            }
          }, {
            "name": "12月第4周(12/24-12/30)",
            "code": "1545580800000",
            "source": {
              "weekCode": "12月第4周",
              "weekName": "12月第4周(12/24-12/30)",
              "timestamp": "1545580800000"
            }
          }]
        ],
        "selectIndex": 2
      }
      */
    },
})

接口说明

Properties

• menu的数据格式说明

  单层级选择数据格式

        {
            code: 'code', //设置code的属性名，选取list中的某一个属性名称
            name: 'name', //设置name的属性名，选取list中的某一个属性名称
            icon: null, //展开和折叠图表的样式，空或者不设置则采用默认图标，字符串'none'表示不展示图标，['/images/default.png','/images/active.png']数组表示自定义图标，第一项表示默认图标路径，第二项表示操作中的图标路径，路径建议使用绝对路径
            list: [{
                code: 'code1', //源数据（数据的标识）
                name: 'name1', //源数据（展示名称）
                xxx: 'xxx', //源数据（其他属性）
                yyy: 'yyy' //源数据（其他属性）
            }, {
                code: 'code1',
                name: 'name1',
                xxx: 'xxx',
                yyy: 'yyy'
            }]
        }

两层级选择数据格式

        {
            code: 'code', //设置code的属性名，选取list中的某一个属性名称
            name: 'name', //设置name的属性名，选取list中的某一个属性名称
            icon: null, //展开和折叠图表的样式，空或者不设置则采用默认图标，字符串'none'表示不展示图标，['/images/default.png','/images/active.png']数组表示自定义图标，第一项表示默认图标路径，第二项表示操作中的图标路径，路径建议使用绝对路径
            linkage: true, //【多层级特有属性】标识是两个层级的数据
            list: [{
                code: 'code1', //源数据（数据的标识）
                name: 'name1', //源数据（展示名称）
                xxx: 'xxx', //源数据（其他属性）
                yyy: 'yyy', //源数据（其他属性）
                childs: { //【多层级特有属性】第二层级的数据,属性名固定为childs
                    code: 'code', //设置code的属性名，选取list中的某一个属性名称
                    name: 'name', //设置name的属性名，选取list中的某一个属性名称
                    list: [{
                        code: 'code1', //源数据（数据的标识）
                        name: 'name1', //源数据（展示名称）
                        xxx: 'xxx', //源数据（其他属性）
                        yyy: 'yyy', //源数据（其他属性）
                    }]
                }
            }]
        }

• selected的数据格式说明

  索引方式配置

  [0, 0, [0, 0]] //前两项的0表示选中单层级中的某一个数据，第三项的[0,0]表示是多层级数据，默认选中第一层级的索引值，及第一层级中child内的list中的索引值

对象方式配置

             [{
                     code: 'code1', //选中项的code值
                     name: 'name1', //选中项的显示名称
                     style: 'color:red', //选中项的style的样式
                     source: { //选中项的源数据【可选属性】
                         xxx: 'xxx',
                         yyy: 'yyy'
                     }
                 }, {
                     code: 'code1',
                     name: 'name1',
                     style: 'color:blue', //选中项的style的样式
                 },
                 [{
                     code: '',
                     name: '',
                 }, {
                     code: '',
                     name: '',
                     style: '', //选中项的style的样式，如果是多层级的，则只有第二级的style才会生效
                     source: {

                     }
                 }]
             ]

自定义样式

系统级别的样式

可直接通过路径 @import "miniprogram_npm/bs-ui-dropdownmenu/default.wxss"; 导入至app.wxss中使用

如果默认样式不符合UED需求，也可自行进行针对其中的样式进行重写

回调函数