创新互联百度小程序教程：switch开关选择器

  • switch 开关选择器
    • 属性说明
      • type 有效值
    • 示例
      • 代码示例 1：默认样式
      • 代码示例 2：设置 checkbox 样式
      • 代码示例 3：列表展示
      • 代码示例 4：包含禁用选项
      • 代码示例 5：自定义颜色
    • Bug & Tip

    switch 开关选择器

    解释：开关选择器。

    属性说明

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

    checked

    Boolean

    false

    否

    是否选中

    type

    String

    switch

    否

    样式，有效值：switch、checkbox

    color

    Color

    #3388ff

    否

    switch 的颜色，同 CSS 的 color

    disabled

    Boolean

    false

    否

    是否禁用

    bindchange

    EventHandle

    否

    checked 改变时触发 change 事件，event.detail = {checked: true}

    type 有效值

    值 说明
    switch 切换样式
    checkbox 复选框样式

    示例

    跳转编辑工具

    在开发者工具中打开

    在 WEB IDE 中打开

    扫码体验

    代码示例

    请使用百度APP扫码

    代码示例 1：默认样式

    • SWAN
    • JS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  默认样式
      4.   
  
  
    4.  
      5.   
  
  
    5.  已开启
      6.   
  
  
    6.  
      7.   
  
  
    7.  已关闭
      8.   
  
  
    8.  
      9.   
  
  
      10.

    代码示例 2：设置 checkbox 样式

    • SWAN
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  设置checkbox样式
      4.   
  
  
    4.  
      5.   
  
  
    5.  已开启
      6.   
  
  
    6.  
      7.   
  
  
    7.  已关闭
      8.   
  
  
    8.  
      9.   
  
  
      10.

    代码示例 3：列表展示

    • SWAN
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  列表展示
      4.   
  
  
    4.  
      5.   
  
  
    5.  已开启
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
      9.   
  
  
    9.  
      10.   
  
  
    10.  已关闭
      11.   
  
  
    11.  
      12.   
  
  
    12.  
      13.   
  
  
    13.  
      14.   
  
  
      15.

    代码示例 4：包含禁用选项

    • SWAN
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  包含禁用选项
      5.   
  
  
    5.  disabled
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
    8.  已开启
      9.   
  
  
    9.  
      10.   
  
  
    10.  
      11.   
  
  
    11.  
      12.   
  
  
    12.  已关闭
      13.   
  
  
    13.   
      14.   
  
  
    14.  
      15.   
  
  
    15.  
      16.   
  
  
      17.

    代码示例 5：自定义颜色

    • SWAN
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  自定义颜色
      5.   
  
  
    5.  color="#00BC89"
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
    8.  已开启
      9.   
  
  
    9.  
      10.   
  
  
    10.  
      11.   
  
  
    11.  
      12.   
  
  
    12.  已关闭
      13.   
  
  
    13.   
      14.   
  
  
    14.  
      15.   
  
  
    15.  
      16.   
  
  
      17.

    Bug & Tip

    • Tip：switch 类型切换时在 iOS 自带振动反馈，可在“系统设置 -> 声音与触感 -> 系统触感反馈”中关闭。

    当前文章：创新互联百度小程序教程：switch开关选择器
    本文来源：http://www.mswzjz.cn/qtweb/news28/328228.html

    攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

    广告

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

    贝锐智能技术为您推荐以下文章

    软件开发知识

    同城分类信息

    成都网站建设　　 　香港服务器空间　　 　眉山电信机房　　 　江油网站建设　　 　重庆做网站　　 　成都网站安全运维　　 　微信小程序开发　　 　网络推广公司　　 　营销网站定位　　 　专业网站建设　　 　香港空间腾讯云　　 　服务器托管　　 　做网站公司　　 　定制级高端网站建设　　 　东电技改　　 　广汉锦华　　 　温江电信机房　　 　绵阳科技城电信IDC机房　　 　绵阳主机托管　　 　外贸网站建设