bs-ui-dropdownmenu
v0.1.3
Published
[Base Readme](./base/README.md)
Readme
bs-ui-dropdownmenu
这个项目是从bs-ui-seed基础创建出来的. 请查看
base/README.md来了解其基础内容.
名词解释
- 单层级：下拉选择中只存在一列选择
- 多层级：下拉选择中存在两列，需要先选择第一列，然后选择第二列数据
功能介绍
- 单层级下拉选择
- 多层级下拉选择
- 多数据格式支持
- 样式自定义
- 设置选中项
- 动态加载
使用方法
- 安装
npm i bs - ui - dropdownmenuapp.json
"usingComponents": {
"bs-dropdownmenu": "miniprogram_npm/bs-ui-dropdownmenu/index"
}app.wxss
@import 'miniprogram_npm/bs-ui-dropdownmenu/default.wxss';- .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>- .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
| Property | Type | Required | Default Value | Comments |
|----------------- |--------- |---------- |------------------------ |------------------------------------ |
| menu | Array | required | -- | 需要选择的列数据，目前支持单层级和两层级两种，内部的对象格式见下方 menu的数据格式说明 的具体描述 |
| selected | Array | required | -- | 设置选中的项，支持索引和对象设置，数组的长度需要与 menu 的数组长度一致，内部的对象格式见下方 selected的数据格式说明 具体描述 |
| is-hidden | Boolean | optional | true | 默认不需要设置，除特殊需要针对配置页某些事件需要关闭弹框时使用 |
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: {
}
}]
]自定义样式
| Class Name | Comments |
|----------------- |--------- |
| cm-head | 自定义 头部区域 样式 |
| cm-item | 自定义 头部单个点击区域 样式 |
| cm-item-active | 自定义 头部点击区域 当前 操作中 的样式 |
| cm-icon | 自定义 图标 的样式控制（展开和折叠的图标） |
| cm-scroll-item | 自定义 单层级 下拉列表scroll-view的样式 |
| cm-data-item | 自定义 单层级 下拉列表每个行的样式 |
| cm-data-item-active | 自定义 单层级 下拉列表选中行的样式 |
| cm-scroll-oneitem | 自定义 多层级第一级 下拉列表scroll-view的样式 |
| cm-data-oneitem | 自定义 多层级第一级 下拉列表每个行的样式 |
| cm-data-oneitem-active | 自定义 多层级第一级 下拉列表选中行的样式 |
| cm-scroll-twoitem | 自定义 多层级第二级 下拉列表scroll-view的样式 |
| cm-data-twoitem | 自定义 多层级第二级 下拉列表每个行的样式 |
| cm-data-twoitem-active | 自定义 多层级第二级 下拉列表选中行的样式 |
系统级别的样式
可直接通过路径 @import "miniprogram_npm/bs-ui-dropdownmenu/default.wxss"; 导入至app.wxss中使用
如果默认样式不符合UED需求，也可自行进行针对其中的样式进行重写
| Class Name | Comments |
|----------------- |--------- |
| sys_bs-dropdownmenu_icon | 与 cm-icon 作用区域一致 |
| sys_bs-dropdownmenu_item-active | 与 cm-item-active 作用区域一致 |
| sys_bs-dropdownmenu_data-item | 与 cm-data-item 作用区域一致 |
| sys_bs-dropdownmenu_data-item-active | 与 cm-data-item-active 作用区域一致 |
| sys_bs-dropdownmenu_scroll-oneitem | 与 cm-scroll-oneitem 作用区域一致 |
| sys_bs-dropdownmenu_data-oneitem | 与 cm-data-oneitem 作用区域一致 |
| sys_bs-dropdownmenu_data-oneitem-active | 与 cm-data-oneitem-active 作用区域一致 |
| sys_bs-dropdownmenu_scroll-twoitem | 与 cm-scroll-twoitem 作用区域一致 |
| sys_bs-dropdownmenu_data-twoitem | 与 cm-data-twoitem 作用区域一致 |
| sys_bs-dropdownmenu_data-twoitem-active | 与 cm-data-twoitem-active 作用区域一致 |
回调函数
| Property | Required | Comments |
| ----------------- | ---------- | -------- |
| bindmenuchange | required | 主要用于在用户选择了某一项的时候回传相关数据，主要包含 selectItem（当前选中的数据）和selectIndex（当前操作的列的索引） ，具体的返回数据示例见 event.detail的示例内容 |
| bindmenuclick | optional | 主要用于在用户选择了头部某一项和多层级第一级下拉的索引，主要包含 menuIndex（头部当前选中的索引）和subIndex（多层级第一级下拉列表选中的索引） ，具体的返回数据示例见 event.detail的示例内容 |