本文編輯：  技術藍天瀏覽 7182 4 版權所有，嚴禁轉載

組件說明:

滑動選擇器。

組件用法：

wxml

<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

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

.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

主要屬性

個人經驗:min為負數

滑動選擇器。
既然min和max是Number類型，那么將min設置為負數是否可以？

wxml

<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

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

.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

分析：可以看到min可以設置為負數，而且，默認滑塊顯示到0的位置（說明value這個屬性是控制這個的）。然后還可以往左拖動，然后顯示出負數；

個人經驗:min如果大于max

我以為會報錯，結果出乎我的意料。它居然不報錯，然后顯示到max位置，滑塊也是不能夠拖動的。這是一個明顯的大坑啊！

wxml

<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

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

.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

這個控件估計后面會改吧。請大家避免這個坑。
另外，max還可以和min相等。

個人經驗:兩個滑塊

我之前用過slider，人家滑塊可以是設置兩個的。這個文檔上沒寫，我也是夠了，只能說不成熟吧。

個人經驗:使用wx.showToast顯示value

除了默認的顯示方式，我們還可以用toast方式顯示選擇的值
wxml

<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

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

.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}