< 文档首页
全部产品
弹性计算
存储
数据库
安全
大数据
人工智能
网络与CDN
视频服务
容器与中间件
开发与运维
API与工具
物联网
物联网行业方案
专有云
企业应用与服务
数字金融
域名与网站
工商财税与知识产权
钉钉
移动研发平台EMAS-专有云
解决方案
会员服务
更多

    slider

    更新时间：2019-09-09 15:14:10

    ★ 我的收藏
    本页目录

    本文介绍滑动选择器（slider）。

    属性名 类型 默认值 描述 最低版本
    name String - 组件名字，用于表单提交获取数据 -
    min Number 0 最小值 -
    max Number 100 最大值 -
    step Number 1 步长，值必须大于 0，并可被 (max - min) 整除 -
    disabled Boolean false 是否禁用 -
    value Number 0 当前取值 -
    show-value Boolean false 是否显示当前 value -
    active-color String #108ee9 已选择的颜色 -
    background-color String #ddd 背景条的颜色 -
    track-size Number 4 轨道线条高度 -
    handle-size Number 22 滑块大小 -
    handle-color String #fff 滑块填充色 -
    onChange EventHandle - 完成一次拖动后触发，event.detail = {value: value} -
    onChanging EventHandle - 拖动过程中触发的事件，event.detail = {value: value} 1.5.0

    图示

    代码示例

    1. <view class="section section-gap">
    2.   <text class="section-title">设置step</text>
    3.   <view class="body-view">
    4.     <slider value="60" onChange="sliderChange" step="5"/>
    5.   </view>
    6. </view>
    8. <view class="section section-gap">
    9.   <text class="section-title">显示当前value</text>
    10.   <view class="body-view">
    11.     <slider value="50" show-value/>
    12.   </view>
    13. </view>
    15. <view class="section section-gap">
    16.   <text class="section-title">设置最小/最大值</text>
    17.   <view class="body-view">
    18.     <slider value="100" min="50" max="200" show-value/>
    19.   </view>
    20. </view>
    22. <view class="page-section">
    23.   <view class="page-section-title">自定义样式</view>
    24.   <view class="page-section-demo">
    25.     <slider value="33" onChange="slider4change" min="25" max="50" show-value
    26.     backgroundColor="#FFAA00" activeColor="#00aaee" trackSize="2" handleSize="6" handleColor="blue" />
    27.   </view>
    28. </view>
    1. Page({
    2.   sliderChange(e) 
    3.     console.log('slider 改变后的值:', e.detail.value)
    4. })
    上一篇：switch
    下一篇：picker-view
    相关文档
    相关产品
    • 移动开发平台mPaaS
      移动开发平台（Mobile PaaS，简称 mPaaS）是源于支付宝 App 的移动开发平台，为移动开发、测试、运营及运维提供云到端的一站式解决方案，能有效降低技术门槛、减少研发成本、提升开发效率，协助企业快速搭建稳定高质量的移动 App。
    • 金融分布式架构 SOFAStack
      SOFAStack™（Scalable Open Financial Architecture Stack）包含构建金融级云原生架构所需的各个组件，也是在金融场景里锤炼出来的最佳实践。提供微服务应用开发、部署发布、监控运维、项目管理、容灾高可用等全栈式解决方案，并兼容Dubbo、Spring Cloud等微服务运行环境，提供基于虚拟机的经典PaaS运维和基于Kubernetes的云原生运维能力，助力客户各类应用轻松转型分布式和云原生架构。
    • 移动研发平台 EMAS
      移动研发平台（Enterprise Mobile Application Studio，简称EMAS），面向企业服务市场，期望把阿里巴巴近十年在移动互联网行业沉淀的DevOps研发支撑能力、移动App基础中间件能力开放给客户，帮助传统企业快速实现移动数字化的转型目标。