微信小程式slider組件使用詳解，slider使用詳解

小程式slider組件使用詳解，slider使用詳解

本文為大家分享了小程式slider組件的使用方法，供大家參考，具體內容如下

WXML

<view class="tui-content"> <view class="tui-slider-head">設定step,當前設定步伐為5,當前值：{{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">是否在右側顯示當前值</view> <view class="tui-slider-box">  <slider bindchange="changeSlider2" value="{{slider2}}" show-value/> </view></view><view class="tui-content"> <view class="tui-slider-head">設定最大值、最小值</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">滑動選取器設定名稱</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組件的兩個事件：bindchanging拖動過程中觸發，bindchange完成一次拖動後觸發！

DEMO下載

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。