詳解微信小程式組件：slider滑動選擇器

slider滑動選擇器元件說明:

滑動選擇器。

slider滑動選擇器範例程式碼運行效果如下：

#下面是WXML程式碼：

<view>
  <text>设置left/right icon</text>
  <view>
    <slider></slider>
  </view>
</view>
<view>
  <text>设置step</text>
  <view>
    <slider></slider>
  </view>
</view>
<view>
  <text>显示当前value</text>
  <view>
    <slider></slider>
  </view>
</view>
<view>
  <text>设置最小/最大值</text>
  <view>
    <slider></slider>
  </view>
</view>

下面是JS程式碼：

var pageData = {}
for (var i = 1; i <p style="text-align: left;">下面是WXSS程式碼：</p><pre class="brush:php;toolbar:false">.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

slider滑動選擇器的主要屬性

屬性名稱

##類型

預設值

說明

minNumber0最小值
maxNumber100最大值
stepNumber1步長，取值必須大於0，並且可被(max - min)整除
disabledBooleanfalse是否停用
valueNumber0目前取值
show-valueBooleanfalse是否顯示目前value
bindchangeEventHandle完成一次拖曳後觸發的事件，event.detail = {value: value}個人經驗:min為負數

滑動選擇器。

既然min和max是Number類型，那麼將min設定為負數是否可以？

下面是WXML程式碼：

<view>
  <text>设置最小/最大值</text>
  <view>
    <slider></slider>
  </view>
</view>

下面是JS程式碼：

var pageData = {}
for (var i = 1; i 下面是WXSS程式碼：<p style="text-align: left;"></p><pre class="brush:php;toolbar:false">.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

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

個人經驗:min如果大於max

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

下面是WXML程式碼：

<view>
  <text>设置最小/最大值</text>
  <view>
    <slider></slider>
  </view>
</view>

下面是JS程式碼：

var pageData = {}
for (var i = 1; i 下面是WXSS程式碼：<p style="text-align: left;"></p><pre class="brush:php;toolbar:false">.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

這個控制項估計後面會改吧。請大家避免這個坑。

另外，max還可以跟min相等。

個人經驗:兩個滑桿

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

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

#除了預設的顯示方式，我們也可以用toast方式顯示所選的值

下面是WXML程式碼：

<view>
  <text>使用toast显示当前value</text>
  <view>
    <slider></slider>
  </view>
</view>

下面是JS程式碼：

var pageData = {}
for (var i = 1; i 下面是WXSS程式碼：<p style="text-align: left;"></p><pre class="brush:php;toolbar:false">.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

以上是詳解微信小程式組件：slider滑動選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章！