欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

小程序极速实战开发《十四》slider滑动选择器

发布：2018-01-25 16:32浏览： 次来源：网络 作者：tianshu

组件说明:

滑动选择器。

组件用法：

小程序极速实战开发《十四》slider滑动选择器(图1)

 

wxml

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

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.     min-height: 100%;
  3.     flex: 1;
  4.     background-color: #FBF9FE;
  5.     font-size: 32rpx;
  6.     overflow: hidden;
  7. }

主要属性
属性名
类型
默认值
说明

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

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

小程序极速实战开发《十四》slider滑动选择器(图2)



wxml

 

  1. <view class="section section_gap">
  2.   <text class="section__title">设置最小/最大值</text>
  3.   <view class="body-view">
  4.     <slider bindchange="slider4change" min="-10" max="20" show-value/>
  5.   </view>
  6. </view>

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.     min-height: 100%;
  3.     flex: 1;
  4.     background-color: #FBF9FE;
  5.     font-size: 32rpx;
  6.     overflow: hidden;
  7. }

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

个人经验:min如果大于max

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

小程序极速实战开发《十四》slider滑动选择器(图3)



wxml

 

  1. <view class="section section_gap">
  2.   <text class="section__title">设置最小/最大值</text>
  3.   <view class="body-view">
  4.     <slider bindchange="slider4change" min="100" max="20" show-value/>
  5.   </view>
  6. </view>

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.     min-height: 100%;
  3.     flex: 1;
  4.     background-color: #FBF9FE;
  5.     font-size: 32rpx;
  6.     overflow: hidden;
  7. }

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

个人经验:两个滑块

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

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

小程序极速实战开发《十四》slider滑动选择器(图4)

 


除了默认的显示方式，我们还可以用toast方式显示选择的值
wxml

  1. <view class="section section_gap">
  2.   <text class="section__title">使用toast显示当前value</text>
  3.   <view class="body-view">
  4.     <slider bindchange="slider3change"  min="0" max="20" step="5" />
  5.   </view>
  6. </view>

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.       wx.showToast({
  7.         title: '您选择了'+ e.detail.value,
  8.         icon: 'success',
  9.         duration: 2000
  10.       })
  11.     }
  12.   })(i)
  13. }
  14. Page(pageData)

wxss

  1. .page {
  2.     min-height: 100%;
  3.     flex: 1;
  4.     background-color: #FBF9FE;
  5.     font-size: 32rpx;
  6.     overflow: hidden;
  7. }





免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有