微信小程序的滑块控件Slider_微信小程序 slider

第一步的创建我们的页面的文件：

然后的话就是我们的wxml文件：
详细的页面布局代码：

<!-- todo 在我们的这个位置的话就是设置和创建我们的相关的滑块控件 -->
<view  class="page">
   <view class="page_hd">
       <!-- todo 在我们的这个位置的话就是设置我们的文本 -->
       <text class="title">slider</text>
       <text class="page_desc">滑块控件</text>
   </view>
   <view class="page_bd">
        <view class="section section_gap">
           <text class="section_title">设置右侧的icon</text>
           <!-- todo 在我们的这个位置的话就是设置我们的bodyview -->
           <view class="body-view">
              <!--  todo  在我们的这个位置的话就是设置我们的相关的方法-->
              <slider bindchange="slider1Change" left-icon = "cancel" right-icon = "success_no_circle"></slider>
           </view>
        </view>
        <!-- todo 在我们的这个位置的话就是设置我们的相关的方法 -->
        <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>
        <!-- todo 在我们的这个位置的话就是设置我们的最大的值和我们的最小的值 -->
        <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>
   </view>
</view>
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

然后的话就是编写我们的js逻辑代码：
详细的代码：

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)
1
2
3
4
5
6
7
8
9

然后的话就是我们程序运行的结果：

参考来自微信开发者文档：