您好,登錄后才能下訂單哦!
本文為大家分享了微信小程序slider組件的使用方法,供大家參考,具體內(nèi)容如下
效果圖
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è)置名稱(chēng)</view> <view class="tui-slider-box"> <view class="tui-fl"> 選擇 </view> <view class="tui-fl"> {{slider4}} </view> <view > <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í)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。