189 8069 5689

创新互联百度小程序教程：slider 滑动选择器

  • slider 滑动选择器
    • 属性说明
    • 示例
      • 代码示例 1：默认样式
      • 代码示例 2：显示当前取值
      • 代码示例 3：自定义最大 / 最小值
      • 代码示例 4：自定义步长
      • 代码示例 5：自定义样式

    slider 滑动选择器

    解释：滑动选择器。

    属性说明

    min

    Number

    0

    否

    最小值

    max

    Number

    100

    否

    最大值

    step

    Number

    1

    否

    步长，取值必须大于 0，并且可被 max - min 整除

    disabled

    Boolean

    false

    否

    是否禁用

    value

    Number

    0

    否

    当前取值

    backgroundColor

    Color

    #cccccc

    否

    背景条的颜色

    block-size

    Number

    24

    否

    滑块的大小，取值范围为 12-28

    block-color

    Color

    #ffffff

    否

    滑块的颜色

    activeColor

    Color

    #3c76ff

    否

    已选择的颜色

    show-value

    Boolean

    false

    否

    是否显示当前 value

    bindchange

    EventHandle

    否

    完成一次拖动后触发的事件，event.detail = {value: value}

    bindchanging

    EventHandle

    否

    拖动过程中触发的事件，event.detail = {value: value}

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

    示例

    跳转编辑工具

    在开发者工具中打开

    在 WEB IDE 中打开

    扫码体验

    代码示例

    请使用百度APP扫码

    代码示例 1：默认样式

    • SWAN
    • JS
     
 
 
        
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  默认样式
      4.   
  
  
    4.  
      5.   
  
  
    5.  class="slider"
      6.   
  
  
    6.  min="0"
      7.   
  
  
    7.  max="1500"
      8.   
  
  
    8.  value="200"
      9.   
  
  
    9.  step="30"
      10.   
  
  
    10.  bind:change="sliderChange"
      11.   
  
  
    11.  bind:changing="sliderChanging"
      12.   
  
  
    12.  disabled="false">
      13.   
  
  
    13.  
      14.   
  
  
    14.  
      15.   
  
  
      16.

    代码示例 2：显示当前取值

    • SWAN
     
 
 
        
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  显示当前取值
      5.   
  
  
    5.  show-value
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
    8.  class="slider"
      9.   
  
  
    9.  min="0"
      10.   
  
  
    10.  max="200"
      11.   
  
  
    11.  value="30"
      12.   
  
  
    12.  show-value
      13.   
  
  
    13.  step="30"
      14.   
  
  
    14.  bind:change="sliderChange"
      15.   
  
  
    15.  disabled="false">
      16.   
  
  
    16.  
      17.   
  
  
    17.  
      18.   
  
  
      19.

    代码示例 3：自定义最大 / 最小值

    • SWAN
     
 
 
        
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  自定义最大/最小值
      5.   
  
  
    5.  min="200" max="1500"
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
    8.  class="slider"
      9.   
  
  
    9.  min="200"
      10.   
  
  
    10.  max="1500"
      11.   
  
  
    11.  value="400"
      12.   
  
  
    12.  show-value step="30"
      13.   
  
  
    13.  bind:change="sliderChange"
      14.   
  
  
    14.  disabled="false">
      15.   
  
  
    15.  
      16.   
  
  
    16.  
      17.   
  
  
      18.

    代码示例 4：自定义步长

    • SWAN
     
 
 
        
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  自定义步长
      5.   
  
  
    5.  step="30"
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
    8.  class="slider"
      9.   
  
  
    9.  min="0"
      10.   
  
  
    10.  max="1500"
      11.   
  
  
    11.  value="200"
      12.   
  
  
    12.  step="30"
      13.   
  
  
    13.  bind:change="sliderChange"
      14.   
  
  
    14.  disabled="false">
      15.   
  
  
    15.  
      16.   
  
  
    16.  
      17.   
  
  
      18.

    代码示例 5：自定义样式

    • SWAN
     
 
 
        
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  自定义样式
      5.   
  
  
    5.  block-size="16" block-color="#3388FF"
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
    8.  class="slider"
      9.   
  
  
    9.  min="0"
      10.   
  
  
    10.  max="1500"
      11.   
  
  
    11.  value="200"
      12.   
  
  
    12.  step="30"
      13.   
  
  
    13.  block-size="16"
      14.   
  
  
    14.  block-color="#3388FF"
      15.   
  
  
    15.  activeColor="#3c76ff"
      16.   
  
  
    16.  backgroundColor="#cccccc"
      17.   
  
  
    17.  disabled="false">
      18.   
  
  
    18.  
      19.   
  
  
    19.  
      20.   
  
  
      21.

    网站题目：创新互联百度小程序教程：slider 滑动选择器
    转载注明：http://cdxtjz.cn/article/cdspese.html

    其他资讯

    联系我们

    您好HELLO!
    感谢您来到成都网站建设公司，若您有合作意向，请您为我们留言或使用以下方式联系我们， 我们将尽快给你回复，并为您提供真诚的设计服务，谢谢。
    • 电话：028- 86922220 18980695689
    • 商务合作邮箱：631063699@qq.com
    • 合作QQ： 532337155
    • 成都网站设计地址：成都市青羊区锣锅巷31号五金站写字楼6楼

    小谭建站工作室

    成都小谭网站建设公司拥有多年以上互联网从业经验的团队，始终保持务实的风格，以"帮助客户成功"为已任，专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司；我们对营销、技术、管理都有自己独特见解，小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务！

    小谭观点

    相对传统的成都网站建设公司而言，小谭是互联网中的网站品牌策划，我们精于企业品牌与互联网相结合的整体战略服务。
    我们始终认为，网站必须注入企业基因，真正使网站成为企业vi的一部分，让整个网站品牌策划体系变的深入而持久。
    友情链接： 企业微信定制   川西大数据中心   nylanyu.com   fadianjizy.com   成都画册设计公司   达州网站制作   成都免费做网站   达州发电机组   乐山主机托管   甘孜发电机公司   
    © Copyright 2023 小谭建站工作室All Rights Reserved.  成都网站建设 / 成都网站建设 / 响应式网站建设 / 成都服务器租用