#### slider
滑动选择器。
| 属性名 | 类型 | 默认值 | 说明 | 最低版本 |
| --------------- | ----------- | ------- | ---------------------------------------- | ---------------------------------------- |
| min | Number | 0 | 最小值 | |
| max | Number | 100 | 最大值 | |
| step | Number | 1 | 步长,取值必须大于 0,并且可被(max - min)整除 | |
| disabled | Boolean | false | 是否禁用 | |
| value | Number | 0 | 当前取值 | |
| color | Color | #e9e9e9 | 背景条的颜色(请使用 backgroundColor) | |
| selected-color | Color | #1aad19 | 已选择的颜色(请使用 activeColor) | |
| activeColor | Color | #1aad19 | 已选择的颜色 | |
| backgroundColor | Color | #e9e9e9 | 背景条的颜色 | |
| block-size | Number | 28 | 滑块的大小,取值范围为 12 - 28 | [1.9.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) |
| block-color | Color | #ffffff | 滑块的颜色 | [1.9.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) |
| show-value | Boolean | false | 是否显示当前 value | |
| bindchange | EventHandle | | 完成一次拖动后触发的事件,event.detail = {value: value} | |
| bindchanging | EventHandle | | 拖动过程中触发的事件,event.detail = {value: value} | [1.7.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) |
**示例代码:**
```
<view class="section section_gap">
<text class="section__title">设置step</text>
<view class="body-view">
<slider bindchange="slider2change" step="5"/>
</view>
</view>
<view class="section section_gap">
<text class="section__title">显示当前value</text>
<view class="body-view">
<slider bindchange="slider3change" show-value/>
</view>
</view>
<view class="section section_gap">
<text class="section__title">设置最小/最大值</text>
<view class="body-view">
<slider bindchange="slider4change" min="50" max="200" show-value/>
</view>
</view>
var pageData = {}
for (var i = 1; i < 5; i++) {
(function (index) {
pageData['slider' + index + 'change'] = function(e) {
console.log('slider' + 'index' + '发生 change 事件,携带值为', e.detail.value)
}
})(i)
}
Page(pageData)
```
:-: ![](http://xiaoyulive.oss-cn-beijing.aliyuncs.com/imgs/weixin/022.png)
- 简介
- 第一章 公众号开发
- 使用微信JSSDK
- 接口权限配置
- 分享接口
- 隐藏按钮项
- 微信支付
- 第二章 小程序开发
- 基础知识
- 分包加载
- WXSS样式表
- 配置
- app.json配置
- window
- tabBar
- page.json配置
- 逻辑层
- app.js
- 场景值
- page.js
- 初始化数据
- 生命周期函数
- 页面相关事件处理函数
- 事件处理函数
- 页面实例方法
- 路由
- 文件作用域
- 模块化
- 视图层
- 模板语法
- 列表渲染
- 条件渲染
- 模板
- 事件
- 引用
- WXS语法规范
- WXS数据类型
- WXS控制流程
- WXS基础类库
- 组件
- 视图容器
- view
- scroll-view
- swiper
- movable-view
- cover-view
- 基础组件
- icon
- text
- rich-text
- progress
- 表单组件
- button
- checkbox
- form
- input
- label
- picker
- picker-view
- radio
- slider
- switch
- textarea
- 导航组件
- navigator
- 媒体组件
- audio
- image
- video
- camera
- 地图组件
- map
- 画布组件
- canvas
- 开放能力
- web-view
- 自定义组件
- 组件模版和样式
- Component
- 组件传值
- 组件事件
- Behaviors
- 组件间关系
- 网络请求
- wx.request
- 微信登录
- 获取 openid 和 unionid
- 获取用户信息
- 将 wx.request 封装为 promise
- 上传图片接口封装
- 数据存储
- 存储数据和读取数据
- 获取数据缓存信息
- 移除数据缓存
- 获取用户设置
- openSetting
- getSetting
- 第三章 小游戏开发
- 参考资料