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

高洛峰
發布: 2017-03-27 11:04:13
原創
4225 人瀏覽過

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設定為負數是否可以?

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

下面是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位置,滑塊也是無法拖曳的。這是一個明顯的大坑啊!

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

下面是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

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

#除了預設的顯示方式,我們也可以用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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!