第一步的创建我们的页面的文件:
然后的话就是我们的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>
然后的话就是编写我们的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)
然后的话就是我们程序运行的结果:
参考来自微信开发者文档: