@ubrorg/selection-pad NPM

selection-pad

npm.io npm.io

cats selection for map

demo

使用

在页面的 page.json 中配置：

{
  "usingComponents": {
    "selection-pad": "@ubrorg/selection-pad/lib/index"
  }
}

在页面的 page.axml 中直接使用：

<selection-pad 
    catsData="{{catsData}}"
    onClickMask="hidePad"
    onClickCancelIcon="hidePad" 
    onClickItem="onClickItem" 
    show="{{show}}"  
    selectedId="{{selectedId}}"
/>

属性	类型	必填	描述
catsData	Array	是	传递数组数据，数组项为对象，对象包括：id,selectedIcon(被选中的icon),icon(未选中状态的icon),text(分类名称)
show	boolean	是	组件显示状态(true显示/false为隐藏)
selectedId	number	是	被选中项目列表(初始值为1，根据点击项目列表，返回项目列表id，将其赋值给selectId,改变项目列表被选中时的样式)
onClickMask	function	是	点击蒙板，调用组件hidePad()方法，将show的状态true改为false，隐藏该组件
onClickCancelIcon	function	是	点击关闭按钮，调用组件hidePad()方法，将show的状态true改为false，隐藏该组件
onClickItem	function	是	点击组件列表，返回带列表ID的onClickItem回调函数，将组件状态（show）改为false，隐藏组件，并将选中列表的ID赋值给selectedId
servicePad	boolean	否	是否为服务分类内容
headerHeight	string	否	header高度
titleSize	string	否	标题大小
center	boolean	否	标题是否居中

开发

yarn 或者 ayarn（阿里内网）安装依赖
小程序 IDE 打开组件（下载地址）

@ubrorg/selection-pad v1.2.0

selection-pad

使用

开发

更多命令