美图齐众专注资阳网站设计 资阳网站制作 资阳网站建设
资阳网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

创新互联百度小程序教程：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
     
 
 
      
  
  
  
      2. 
  
  
  
      3. 
  
  
  
    3.  range="{{multiArray1}}"
      4. 
  
  
  
    4.  label="四字标题"
      5. 
  
  
  
    5.  range-key="name"
      6. 
  
  
  
    6.  bind:change="change"
      7. 
  
  
  
    7.  placeholder="{{['请选择省', '请选择市', '请选择区']}}"
      8. 
  
  
  
    8. >
      9. 
  
  
  
      10. 
  
  
  
      11. 
  
  
  
    11.  range="{{multiArray2}}"
      12. 
  
  
  
    12.  label="无下边框""
      13. 
  
  
  
    13.  range-key="name"
      14. 
  
  
  
    14.  noborder="true"
      15. 
  
  
  
    15.  bind:change="change"
      16. 
  
  
  
    16. >
      17. 
  
  
  
      18. 
  
  
  
      19. 
  
  
  
    19.  range="{{multiArray3}}"
      20. 
  
  
  
    20.  label="六字标题排版"
      21. 
  
  
  
    21.  range-key="name"
      22. 
  
  
  
    22.  label-width="6em"
      23. 
  
  
  
    23.  bind:change="change"
      24. 
  
  
  
    24.  placeholder="{{['请选择省', '请选择市', '请选择区']}}"
      25. 
  
  
  
    25. >
      26. 
  
  
  
      27. 
  
  
  
      28. 
  
  
  
    28.  range="{{multiArray4}}"
      29. 
  
  
  
    29.  label="配置未点击时提示"
      30. 
  
  
  
    30.  range-key="name"
      31. 
  
  
  
    31.  bind:change="change"
      32. 
  
  
  
    32.  tips="{{['请选择省', '请选择市', '请选择区']}}"
      33. 
  
  
  
    33. >
      34. 
  
  
  
      35. 
  
  
  
      36. 
  
  
  
    36.  range="{{multiArray5}}"
      37. 
  
  
  
    37.  label="回填"
      38. 
  
  
  
    38.  value="{{[1, 2, 1]}}"
      39. 
  
  
  
    39.  range-key="name"
      40. 
  
  
  
    40.  bind:change="change"
      41. 
  
  
  
    41.  placeholder="{{['请选择省', '请选择市', '请选择区']}}"
      42. 
  
  
  
    42. >
      43. 
  
  
  
      44. 
  
  
  
      45. 
  
  
  
    45.  range="{{multiArray6}}"
      46. 
  
  
  
    46.  label="禁用型"
      47. 
  
  
  
    47.  range-key="name"
      48. 
  
  
  
    48.  disabled
      49. 
  
  
  
    49.  bind:change="change"
      50. 
  
  
  
    50.  placeholder="{{['请选择省', '请选择市', '请选择区']}}"
      51. 
  
  
  
    51. >
      52. 
  
  
  
      53. 
  
  
  
      54. 
  
  
  
    54.  range="{{multiArray7}}"
      55. 
  
  
  
    55.  label="externalClasses"
      56. 
  
  
  
    56.  cascade-picker="cascade-picker"
      57. 
  
  
  
    57.  cascade-label="cascade-label"
      58. 
  
  
  
    58.  cascade-content="cascade-content"
      59. 
  
  
  
    59.  cascade-picker-content="cascade-picker-content"
      60. 
  
  
  
    60.  range-key="name"
      61. 
  
  
  
    61.  bind:change="change"
      62. 
  
  
  
    62.  placeholder="{{['请选择省', '请选择市', '请选择区']}}"
      63. 
  
  
  
    63. >
      64.

    文章标题：创新互联百度小程序教程：cascade级联
    文章来源：http://www.zsjierui.cn/article/cooogjj.html

    其他资讯