微信小程序slider組件使用詳解
更新時間：2018年01月31日 11:20:24 作者：Rattenking
這篇文章主要為大家詳細介紹了微信小程序slider組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文為大家分享了微信小程序slider組件的使用方法，供大家參考，具體內(nèi)容如下
效果圖
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">是否在右側(cè)顯示當前值</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拖動過程中觸發(fā)，bindchange完成一次拖動后觸發(fā)！
DEMO下載
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
PHP實現(xiàn)基于Redis的MessageQueue隊列封裝操作示例
這篇文章主要介紹了PHP實現(xiàn)基于Redis的MessageQueue隊列封裝操作,結(jié)合實例形式分析了Redis的PHP消息隊列封裝與使用相關操作技巧,需要的朋友可以參考下2019-02-02
在前端開發(fā)中,處理URL參數(shù)是一個常見的任務,尤其是在沒有框架支持的情況下,這篇文章主要介紹了JavaScript獲取URL中參數(shù)值的四種方法,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了uni-app之APP和小程序微信授權(quán)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
個人網(wǎng)站留言頁面（前端jQuery編寫、后臺php讀寫MySQL）
這篇文章主要為大家介紹了個人網(wǎng)站的留言頁面，前端使用jQuery編寫、后臺利用php簡單讀寫MySQL數(shù)據(jù)庫，感興趣的小伙伴們可以參考一下2016-05-05
本篇文章主要介紹了bootstrap多層模態(tài)框滾動條消失的問題，具有一定的參考價值，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了使用Threejs加載外部glb文件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
JS實現(xiàn)根據(jù)文件字節(jié)數(shù)返回文件大小的方法
這篇文章主要介紹了JS實現(xiàn)根據(jù)文件字節(jié)數(shù)返回文件大小的方法,涉及javascript數(shù)值計算與字符串操作相關技巧,需要的朋友可以參考下2016-08-08
這篇文章主要教大家學習使用Bootstrap柵格系統(tǒng)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
JS前端面試必備——基本排序算法原理與實現(xiàn)方法詳解【插入/選擇/歸并/冒泡/快速排序】
這篇文章主要介紹了JS前端面試基本排序算法原理與實現(xiàn)方法,結(jié)合實例形式詳細分析了JS常見的基本排序算法相關原理、實現(xiàn)方法、時間復雜度及操作注意事項,需要的朋友可以參考下2020-02-02
window.onload在某些情況下還是比較實用的，比如加載時執(zhí)行哪些腳本等等，下面有幾個不錯的示例，需要的朋友可以參考下2013-11-11