用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

slider滑动选择器组件学习笔记

纸飞机 2018-3-8 09:35

slider滑动选择器组件说明:滑动选择器。slider滑动选择器示例代码运行效果如下:下面是WXML代码: 设置left/right icon 设置step 显示当前value 设置最小/最大值 下面是JS代码: ...

slider滑动选择器组件说明:

滑动选择器。

slider滑动选择器示例代码运行效果如下:

下面是WXML代码:

  1. class="section section_gap">
  2. class="section__title">设置left/right icon
  3. class="body-view">
  4. bindchange="slider1change" left-icon="cancel" right-icon="success_no_circle"/>
  5. class="section section_gap">
  6. class="section__title">设置step
  7. class="body-view">
  8. bindchange="slider2change" step="5"/>
  9. class="section section_gap">
  10. class="section__title">显示当前value
  11. class="body-view">
  12. bindchange="slider3change" show-value/>
  13. class="section section_gap">
  14. class="section__title">设置最小/最大值
  15. class="body-view">
  16. bindchange="slider4change" min="50" max="200" show-value/>

下面是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)

下面是WXSS代码:

  1. .page {
  2. 邀请

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏