slider滑动选择器组件说明:

滑动选择器。

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

下面是WXML代码:

[XML] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<view class="section section_gap">
  <text class="section__title">设置left/right icon</text>
  <view class="body-view">
    <slider bindchange="slider1change" left-icon="cancel" right-icon="success_no_circle"/>
  </view>
</view>
<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>

下面是JS代码:

[JavaScript] 纯文本查看 复制代码
1
2
3
4
5
6
7
8
9
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)

下面是WXSS代码:

[CSS] 纯文本查看 复制代码
1
2
3
4
5
6
7
.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

slider滑动选择器的主要属性

属性名
类型
默认值
说明

minNumber0最小值
maxNumber100最大值
stepNumber1步长,取值必须大于0,并且可被(max - min)整除
disabledBooleanfalse是否禁用
valueNumber0当前取值
show-valueBooleanfalse是否显示当前 value
bindchangeEventHandle完成一次拖动后触发的事件,event.detail = {value: value}个人经验:min为负数

滑动选择器。
既然min和max是Number类型,那么将min设置为负数是否可以?

下面是WXML代码:

[XML] 纯文本查看 复制代码
1
2
3
4
5
6
<view class="section section_gap">
  <text class="section__title">设置最小/最大值</text>
  <view class="body-view">
    <slider bindchange="slider4change" min="-10" max="20" show-value/>
  </view>
</view>

下面是JS代码:

[JavaScript] 纯文本查看 复制代码
1
2
3
4
5
6
7
8
9
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)

下面是WXSS代码:

[CSS] 纯文本查看 复制代码
1
2
3
4
5
6
7
.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

分析:可以看到min可以设置为负数,而且,默认滑块显示到0的位置(说明value这个属性是控制这个的)。然后还可以往左拖动,然后显示出负数;

个人经验:min如果大于max

我以为会报错,结果出乎我的意料。它居然不报错,然后显示到max位置,滑块也是不能够拖动的。这是一个明显的大坑啊!

下面是WXML代码:

[XML] 纯文本查看 复制代码
1
2
3
4
5
6
<view class="section section_gap">
  <text class="section__title">设置最小/最大值</text>
  <view class="body-view">
    <slider bindchange="slider4change" min="100" max="20" show-value/>
  </view>
</view>

下面是JS代码:

[JavaScript] 纯文本查看 复制代码
1
2
3
4
5
6
7
8
9
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)

下面是WXSS代码:

[CSS] 纯文本查看 复制代码
1
2
3
4
5
6
7
.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

这个控件估计后面会改吧。请大家避免这个坑。
另外,max还可以和min相等。

个人经验:两个滑块

我之前用过slider,人家滑块可以是设置两个的。这个文档上没写,我也是够了,只能说不成熟吧。

个人经验:使用wx.showToast显示value

除了默认的显示方式,我们还可以用toast方式显示选择的值
下面是WXML代码:

[XML] 纯文本查看 复制代码
1
2
3
4
5
6
<view class="section section_gap">
  <text class="section__title">使用toast显示当前value</text>
  <view class="body-view">
    <slider bindchange="slider3change"  min="0" max="20" step="5" />
  </view>
</view>

下面是JS代码:

[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
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)
      wx.showToast({
        title: '您选择了'+ e.detail.value,
        icon: 'success',
        duration: 2000
      })
    }
  })(i)
}
Page(pageData)

下面是WXSS代码:

[CSS] 纯文本查看 复制代码
1
2
3
4
5
6
7
.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

点击查看原文

微信小程序组件解读和分析:十四、slider滑动选择器的更多相关文章

  1. 微信小程序组件解读和分析:四、icon图标

      icon图标组件说明: icon是一种图标格式,用于系统图标.软件图标等,这种图标扩展名为.icon..ico.常见的软件或windows桌面上的那些图标一般都是ICON格式的.在应用上面很多地方 ...

  2. 微信小程序组件解读和分析:六、progress进度条

    progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...

  3. 微信小程序组件解读和分析:五、text文本

    text文本组件说明: text 文本就是微信小程序中显示出来的文本. text文本组件的示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 <v ...

  4. 微信小程序组件解读和分析:十、input输入框

    input输入框组件说明: 本文介绍input 输入框的各种参数及特性. input输入框示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 0 ...

  5. 微信小程序组件解读和分析:十五、switch 开关选择器

    switch 开关选择器组件说明: switch,开关选择器.只能选择或者不选.这种属于表单控件或者查询条件控件. switch 开关选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯 ...

  6. 微信小程序组件解读和分析:十二、picker滚动选择器

    picker滚动选择器组件说明: picker: 滚动选择器,现支持三种选择器,通过mode属性来区分, 分别是普通选择器(mode = selector),时间选择器(mode = time),日期 ...

  7. 微信小程序组件解读和分析:八、checkbox复选项

    checkbox复选项组件说明: checkbox是小程序表单组件中的一个组件,作用是在表单中引导用户做出选择. 要使用checkbox组件,还需要在同组中所有的checkbox标签外使用checkb ...

  8. 微信小程序组件解读和分析:一、view(视图容器 )

    view组件说明:    视图容器    跟HTML代码中的DIV一样,可以包裹其他的组件,也可以被包裹在其他的组件内部.用起来比较自由随意,没有固定的结构. view组件的用法: 示例项目的wxml ...

  9. 微信小程序组件解读和分析:十三、radio单选项目

    radio单选项目组件说明: radio:单选项目. radio-group: 单项选择器,内部由多个<radio/>组成. radio单选项目示例代码运行效果如下: 下面是WXML代码: ...

随机推荐

  1. Mac Mysql [ERR] 2006 - MySQL server has gone away

    Mac mysql 安装后,导入sql数据,出现这个错误: 处理方式,是因为sql文件太大,需要修改mysql的配置.如果没有my.cnf就自己建一个. cd /etc sudo vim my.cnf ...

  2. 用 kGDB 调试 Linux 内核

    简介 这个文档记录了用kGDB调试Linux内核的全过程,都是在前人工作基础上的一些总结.以下操作都是基于特定板子来进行,但是大部分都能应用于其他平台. 要使用KGDB来调试内核,首先需要修改conf ...

  3. YTU 2858: 编程题AB-骨牌铺方格

    2858: 编程题AB-骨牌铺方格 时间限制: 1 Sec  内存限制: 128 MB 提交: 87  解决: 23 题目描述 在2×n的一个长方形方格中,用一个1× 2的骨牌铺满方格,输入n ,输出 ...

  4. YTU 2845: 编程题AB-卡片游戏

    2845: 编程题AB-卡片游戏 时间限制: 1 Sec  内存限制: 128 MB 提交: 30  解决: 13 题目描述 小明对数字的序列产生了兴趣: 现有许多张不同的数字卡片,用这若干张卡片能排 ...

  5. YTU 2912: 圆柱体的C++

    2912: 圆柱体的C++ 时间限制: 1 Sec  内存限制: 128 MB 提交: 333  解决: 133 题目描述 小明的弟弟加入的C++兴趣小组,组长布置的第一个任务就是将已有的C程序改写成 ...

  6. 【转】Java 并发编程:核心理论

    并发编程是Java程序员最重要的技能之一,也是最难掌握的一种技能.它要求编程者对计算机最底层的运作原理有深刻的理解,同时要求编程者逻辑清晰.思维缜密,这样才能写出高效.安全.可靠的多线程并发程序.本系 ...

  7. codeforces 686B B. Little Robber Girl's Zoo(水题)

    题目链接: B. Little Robber Girl's Zoo //#include <bits/stdc++.h> #include <vector> #include ...

  8. [USACO 2017DEC] Greedy Gift Takers

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=5139 [算法] 二分答案 时间复杂度 : O(NlogN^2) [代码] #incl ...

  9. Ruby的一些常用全局变量

    $! latesterror message $@ locationof error $_ stringlast read by gets $. linenumber last read by int ...

  10. Center OS Tomcat7 服务器配置总结

    tomcat7 目录结构 --- webapps 应用存放目录,可以配置Host 来决定这个文件的目录,可以配置多个Host,多个webapps ---ROOT 项目根目录,Tomcat会特殊对待这个 ...