欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序slider組件使用詳解

 更新時(shí)間：2018年01月31日 11:20:24   作者：Rattenking  
這篇文章主要為大家詳細(xì)介紹了微信小程序slider組件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文為大家分享了微信小程序slider組件的使用方法，供大家參考，具體內(nèi)容如下

效果圖

slider組件效果圖

WXML

<view class="tui-content">
 <view class="tui-slider-head">設(shè)置step,當(dāng)前設(shè)置步伐為5,當(dāng)前值：{{slider1}}</view>
 <view class="tui-slider-box">
  <slider bindchange="changeSlider1" step="5" value="{{slider1}}"/>
 </view>
</view>
<view class="tui-content">
 <view class="tui-slider-head">是否在右側(cè)顯示當(dāng)前值</view>
 <view class="tui-slider-box">
  <slider bindchange="changeSlider2" value="{{slider2}}" show-value/>
 </view>
</view>
<view class="tui-content">
 <view class="tui-slider-head">設(shè)置最大值、最小值</view>
 <view class="tui-slider-box">
  <slider bindchange="changeSlider3" min="20" max="90" value="{{slider3}}" show-value/>
 </view>
</view>
<view class="tui-content">
 <view class="tui-slider-head">滑動(dòng)選擇器設(shè)置名稱</view>
 <view class="tui-slider-box">
  <view class="tui-fl">
   選擇
  </view>
  <view class="tui-fl">
   {{slider4}}
  </view>
  <view style="overflow:hidden">
   <slider bindchanging="changeSlider4" value="{{slider4}}"/>
  </view>
 </view>
</view>

WXSS

.tui-slider-head,.tui-slider-box{
 height: 80rpx;
 line-height: 80rpx;
 font-size: 35rpx;
 color: #666;
}

JS

Page({
 data: {
  slider1: 50,
  slider2: 50,
  slider3: 50,
  slider4: 50
 },
 changeSlider1(e) {
  this.setData({ slider1: e.detail.value })
 },
 changeSlider2(e){
  this.setData({ slider2: e.detail.value})
 },
 changeSlider3(e) {
  this.setData({ slider3: e.detail.value })
 },
 changeSlider4(e) {
  this.setData({ slider4: e.detail.value })
 }
})

注意：slider組件的兩個(gè)事件：bindchanging拖動(dòng)過(guò)程中觸發(fā)，bindchange完成一次拖動(dòng)后觸發(fā)！

DEMO下載

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論