更新记录
1.0.1(2024-07-03)
下载此版本
第一个版本
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.99 |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
multiSelector
介绍
multiSelector 是多级联动选择组件,组件主要解决了2个重要问题:
<picker>
组件的没法跨多个小程序的多级联动能力,<picker-view>
的数据响应延迟导致快速点击没法选择到正确数据的BUG;
<picker>
和<picker-view>
对异步数据响应不友好问题;
安装教程
- 组件使用了 scss 预处理语法,请保证运行环境安装了 scss 依赖;
- 推荐使用【下载插件并导入HBuilderX】的方式下载组件
使用说明
可以通过【使用 HBuilderX 导入示例项目】快速了解组件的联动逻辑
组件引入
import HelangMultiSelector from '@/uni_modules/helang-multiSelector/components/helang-multiSelector/index.vue';
组件使用
<helang-multi-selector
:list="list"
:defaultIndexs="defaultIndexs"
:zIndex="index"
:loadingIndex="loadingIndex"
@change="onChage"
@cancel="onCancel"
@confirm="onConfirm"
v-if="show"
></helang-multi-selector>
属性说明
属性名称 |
类型 |
默认值 |
说明 |
list |
二维数组(详情见 list格式说明) |
[] |
选择列表数据 |
defaultIndexs |
Number[] |
[] |
默认选中索引 |
zIndex |
Number |
100 |
弹窗渲染层级 |
loadingIndex |
Number |
-1 |
当前加载中的列,-1时取消加载状态 |
list格式说明
const list = [
[
{
value:String | Number,
label::String | Number
},
{
value:String | Number,
label::String | Number
}
// ...
],
[
{
value:String | Number,
label::String | Number
},
// ...
]
];
方法说明
方法名称 |
返回参数 |
说明 |
change |
(data:{colIndex,indexs,values}) |
改变事件,点击选择列或已选择项时触发。colIndex 被点击的列,indexs 已选中的索引,values 已选中的数据。 |
cancel |
- |
取消事件,点击取消按钮或遮罩层时触发。 |
confirm |
(data:{indexs,values}) |
确定事件,点击确定按钮时触发。indexs 已选中的索引,values 已选中的数据。 |
插槽说明
插槽名称 |
说明 |
checked |
选择列表已选中的效果,H5/APP生效 |
参与贡献
- 作者:河浪
- 邮箱:helang.love@qq.com