鱼C论坛

 找回密码
 立即注册
查看: 1498|回复: 2

[庖丁解牛] 050 ∞ 表单组件:slider

[复制链接]
发表于 2018-6-28 09:37:53 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2018-6-28 09:37 编辑


                               
登录/注册后可看大图


上一讲我们搞定了radio,本次来学习slider

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 开始支)
block-color        Color        #ffffff        滑块的颜色 (基础库 1.9.0 开始支持)
show-value        Boolean        false        是否显示当前 value
bindchange        EventHandle                完成一次拖动后触发的事件,event.detail = {value: value}
bindchanging        EventHandle                拖动过程中触发的事件,event.detail = {value: value} (基础库 1.7.0 开始支持)


index.wxml:
  1. <view class="section section_gap">
  2.   <text class="section__title">设置step</text>
  3.   <view class="body-view">
  4.     <slider bindchange="slider2change" step="5"/>
  5.   </view>
  6. </view>

  7. <view class="section section_gap">
  8.   <text class="section__title">显示当前value</text>
  9.   <view class="body-view">
  10.     <slider bindchange="slider3change" show-value/>
  11.   </view>
  12. </view>

  13. <view class="section section_gap">
  14.   <text class="section__title">设置最小/最大值</text>
  15.   <view class="body-view">
  16.     <slider bindchange="slider4change" min="50" max="200" show-value/>
  17.   </view>
  18. </view>
复制代码


index.js:
  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)
复制代码

Jun-28-2018 09-36-36.gif
Snip20180628_236.png





课后作业


1、slider的什么属性可以设定其步长?



答案:
游客,如果您要查看本帖隐藏内容请回复





如果有收获,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢小程序,请订阅 专辑&#9758;传送门)(不喜欢更要订阅



                               
登录/注册后可看大图

评分

参与人数 1贡献 +3 收起 理由
朋老师 + 3 鱼C有你更精彩^_^

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-6-28 09:45:40 | 显示全部楼层
step

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2018-6-28 10:01

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 鱼C有你更精彩^_^

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 18:45

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表