创新互联百度小程序教程:cascade级联

  • cascade 级联
    • 属性说明
    • 示例
      • 代码示例

    cascade 级联

    解释:多级选择组件,为开发者提供级联选择功能,默认为三级。比如:省/市/区。该组件包括左侧标签栏,以及右侧多个 picker(从底部弹起的滚动选择器)。支持配置左侧标签宽度,并提供自定义样式,可供开发者进行定制。

    成都创新互联公司成立于2013年,先为赤壁等服务建站,赤壁等地企业,进行企业商务咨询服务。为赤壁企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

    属性说明

    属性名 类型 必填 默认值 说明

    range

    Array

    多级 picker 的内容数组,需要传入二维数组,格式为[[],[],[]]

    range-key

    String

    当 range 中的一维数组为[{ range-key : value }]时, range-key 对应的 value 为选择器显示的内容

    label-width

    String

    4em

    左侧文字宽度,须包含单位,例如 em 、 px 、 rpx 、 vw 、 vh … 默认为 4 字宽度 4em ( 72px ),6 字宽度为 6em ,建议用 em,可以适配

    label

    String

    左侧文字描述

    placeholder

    Array

    []

    picker 没值时默认显示

    value

    Array

    []

    picker 选中时的数组下标

    change-label-color

    Boolean

    false

    是否需要更改组件左侧标签的颜色

    label-color

    String

    #c40311

    change-lable-color 为 true 时的颜色值

    disabled

    Boolean

    false

    未选择第一/二级 picker ,而直接选择其余 picker 时,是否展示禁用

    tips

    Array

    []

    未按顺序选择第一、二、三级 picker 时,分别弹出tips[0]、tips[1]的提示

    noborder

    Boolean

    false

    整个组件外侧是否有下边框线

    change

    EventHandle

    每一级 picker 选择时,触发 change 事件

    cascade-picker

    String

    级联组件的外部样式类,可用于修改组件最外层样式

    cascade-label

    String

    级联组件的外部样式类,可用于修改组件左侧标签样式

    cascade-content

    String

    级联组件的外部样式类,可用于修改组件右侧单行 picker 的样式

    cascade-picker-content

    String

    级联组件的外部样式类,可用于修改 picker 内容展示样式

    示例

    跳转编辑工具

    在开发者工具中打开

    在 WEB IDE 中打开

    扫码体验

    代码示例

    请使用百度APP扫码

    代码示例

    • SWAN
    • JS
    • CSS
    • JSON
     
     
     
    1. range="{{multiArray1}}"
    2. label="四字标题"
    3. range-key="name"
    4. bind:change="change"
    5. placeholder="{{['请选择省', '请选择市', '请选择区']}}"
    6. >
    7. range="{{multiArray2}}"
    8. label="无下边框""
    9. range-key="name"
    10. noborder="true"
    11. bind:change="change"
    12. >
    13. range="{{multiArray3}}"
    14. label="六字标题排版"
    15. range-key="name"
    16. label-width="6em"
    17. bind:change="change"
    18. placeholder="{{['请选择省', '请选择市', '请选择区']}}"
    19. >
    20. range="{{multiArray4}}"
    21. label="配置未点击时提示"
    22. range-key="name"
    23. bind:change="change"
    24. tips="{{['请选择省', '请选择市', '请选择区']}}"
    25. >
    26. range="{{multiArray5}}"
    27. label="回填"
    28. value="{{[1, 2, 1]}}"
    29. range-key="name"
    30. bind:change="change"
    31. placeholder="{{['请选择省', '请选择市', '请选择区']}}"
    32. >
    33. range="{{multiArray6}}"
    34. label="禁用型"
    35. range-key="name"
    36. disabled
    37. bind:change="change"
    38. placeholder="{{['请选择省', '请选择市', '请选择区']}}"
    39. >
    40. range="{{multiArray7}}"
    41. label="externalClasses"
    42. cascade-picker="cascade-picker"
    43. cascade-label="cascade-label"
    44. cascade-content="cascade-content"
    45. cascade-picker-content="cascade-picker-content"
    46. range-key="name"
    47. bind:change="change"
    48. placeholder="{{['请选择省', '请选择市', '请选择区']}}"
    49. >

    名称栏目:创新互联百度小程序教程:cascade级联
    新闻来源:http://www.shufengxianlan.com/qtweb/news35/165035.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联