微信小程序— slider(滑动选择器)_微信小程序slider滑块具体事例应用

今天来介绍一下slider(滑动选择器):

官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/slider.html

1.效果图如下，

2.index.js中：

//index.js
//获取应用实例
const app = getApp()
var that;
var isDisabled = true;
Page({
  data: {
    //默认最小值20；
    min: 20,
    //默认最大值20；
    max: 100,
    //设置不禁用
    disabled: false,
    //设置选中默认颜色
    colorSelect: '#00ff00',
    //设置背景颜色
    backgroundColor: "#ccc",
    //设置滑块的大小
    blockSize: 28,
    //设置滑块的颜色
    blockColor: "#eeeeee",
    //是否显示当前 value
    showValue: true,
    //步长
    step: 5,
  },

  onLoad: function () {
    that = this;
  },
  //设置最小值
  minInput: function (e) {
    that.setData({
      min: e.detail.value,
    })
  },
  //设置最大值
  maxInput: function (e) {
    that.setData({
      max: e.detail.value,
    })
  },
  //设置是否禁用滑动
  btnDisabled: function (e) {
    if (isDisabled == true) {
      isDisabled = false;
      that.setData({
        disabled: true,
      })
    } else {
      isDisabled = true;
      that.setData({
        disabled: false,
      })
    }
  },
  //已选择的颜色
  colorSelectInput: function (e) {
    that.setData({
      colorSelect: e.detail.value,
    })
  },
  //设置背景条的颜色
  bgColorInput: function (e) {
    that.setData({
      backgroundColor: e.detail.value,
    })
  },
  //设置滑块的大小
  blockSizeInput: function (e) {
    that.setData({
      blockSize: e.detail.value,
    })
  },
  //设置步长，取值必须大于 0，并且可被(max - min)整除
  stepInput: function (e) {
    that.setData({
      step: e.detail.value,
    })
  },
  //设置滑块的颜色
  blockColorInput: function (e) {
    that.setData({
      blockColor: e.detail.value,
    })
  },
  //设置是否显示当前value
  btnshowValue: function () {
    that.setData({
      showValue: false,
    })
  },
  //完成一次拖动后触发的事件
  sliderchange: function (e) {
    wx.showToast({
      title: "拖动后触发" + e.detail.value,
      duration: 1000
    })
  },
  //拖动过程中的触发的事件
  bindchanging: function (e) {
    wx.showToast({
      title: "拖动中触发" + e.detail.value,
      duration: 1000
    })
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

3.index.wxss中：

/*输入框样式  */

.section {
  width: 93%;
  margin: 20rpx;
  background-color: #ccc;
  padding: 10rpx;
  font-size: 30rpx;
  border-radius: 5px;
}

/*button样式  */

.button {
  width: 95%;
  margin: 20rpx;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4.index.wxml中：

<view class="section_gap">
  <text class="section__title">使用示例：</text>
  <view class="body-view">
    <slider bindchange="sliderchange" bindchanging="bindchanging" min="{{min}}" max="{{max}}" disabled="{{disabled}}" activeColor='{{colorSelect}}' backgroundColor='{{backgroundColor}}' block-size='{{blockSize}}' block-color='{{blockColor}}' step="{{step}}" show-value='{{showValue}}'/>
  </view>
</view>

<view class="section">
  <input placeholder="设置最小值，默认为20" type="number" bindinput="minInput" confirm-type="done" focus/>
</view>

<view class="section">
  <input placeholder="设置最大值，默认为100" type="number" bindinput="maxInput" confirm-type="done" focus/>
</view>

<view>
  <view class='text'>设置已选择的颜色(请使用十六进制颜色值,例如：#ff00ff)</view>
  <input class="section" placeholder="" value="#" bindinput="colorSelectInput" confirm-type="done" focus/>
</view>

<view>
  <view class='text'>设置背景条的颜色(请使用十六进制颜色值,例如：#ff00ff)</view>
  <input class="section" placeholder="" value="#" bindinput="bgColorInput" confirm-type="done" focus/>
</view>

<view>
  <view class='text'>设置滑块的颜色(请使用十六进制颜色值,例如：#ff00ff)</view>
  <input class="section" placeholder="" value="#" bindinput="blockColorInput" confirm-type="done" focus/>
</view>

<view class="section">
  <input placeholder="设置滑块的大小，取值范围为12 - 28" type="number" bindinput="blockSizeInput" confirm-type="done" focus/>
</view>

<view class="section">
  <input placeholder="步长，取值必须大于 0，并且可被(max - min)整除" type="number" bindinput="stepInput" confirm-type="done" focus/>
</view>

<button class='button' catchtap='btnDisabled'>设置/取消禁用</button>
<button class='button' catchtap='btnshowValue'>隐藏当前value</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

本人菜鸟一个，有什么 不对的地方希望大家指出评论，大神勿喷，希望大家一起学习进步！