课程表

微信小程序框架

微信小程序组件

微信小程序API

微信小程序开放接口

微信小程序工具

微信小程序设计规范

工具箱
速查手册

小程序 表单滑动选择器

当前位置:免费教程 » 移动开发 » 微信小程序

滑动选择器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 背景条的颜色
show-value Boolean false 是否显示当前 value
bindchange EventHandle   完成一次拖动后触发的事件,event.detail = {value: value}

示例代码:

  1. <view class="section section_gap">
  2. <text class="section__title">设置left/right icon</text>
  3. <view class="body-view">
  4. <slider bindchange="slider1change" left-icon="cancel" right-icon="success_no_circle"/>
  5. </view>
  6. </view>
  7.  
  8. <view class="section section_gap">
  9. <text class="section__title">设置step</text>
  10. <view class="body-view">
  11. <slider bindchange="slider2change" step="5"/>
  12. </view>
  13. </view>
  14.  
  15. <view class="section section_gap">
  16. <text class="section__title">显示当前value</text>
  17. <view class="body-view">
  18. <slider bindchange="slider3change" show-value/>
  19. </view>
  20. </view>
  21.  
  22. <view class="section section_gap">
  23. <text class="section__title">设置最小/最大值</text>
  24. <view class="body-view">
  25. <slider bindchange="slider4change" min="50" max="200" show-value/>
  26. </view>
  27. </view>
  1. var pageData = {}
  2. for(var i = 1; i < 5; ++i) {
  3. (function (index) {
  4. pageData[`slider${index}change`] = function(e) {
  5. console.log(`slider${index}发生change事件,携带值为`, e.detail.value)
  6. }
  7. })(i);
  8. }
  9. Page(pageData)

slider
 

转载本站内容时,请务必注明来自W3xue,违者必究。
 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号