微信小程序 slider 詳解及實(shí)例代碼
更新時(shí)間：2017年01月10日 15:18:02 投稿：lqh
這篇文章主要介紹了微信小程序 slider 詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
微信小程序slider
相關(guān)文章：
實(shí)現(xiàn)效果圖：
滑動(dòng)選擇器
| 屬性名 | 類型 | 默認(rèn)值 | 說(shuō)明 |
|---|---|---|---|
| min | Number | 0 | 最小值 |
| max | Number | 100 | 最大值 |
| step | Number | 1 | 步長(zhǎng)，取值必須大于 0，并且可被 (max - min) 整除 |
| disabled | Boolean | false | 是否禁用 |
| value | Number | 0 | 當(dāng)前取值 |
| show-value | Boolean | false | 是否顯示當(dāng)前value |
| bindchange | EventHandle | 完成一次拖動(dòng)后觸發(fā)的事件，event.detail = {value:value} |
示例代碼：
<view class="section section_gap"> <text class="section__title">設(shè)置left/right icon</text> <view class="body-view"> <slider bindchange="slider1change" left-icon="cancel" right-icon="success_no_circle"/> </view> </view> <view class="section section_gap"> <text class="section__title">設(shè)置step</text> <view class="body-view"> <slider bindchange="slider2change" step="5"/> </view> </view> <view class="section section_gap"> <text class="section__title">顯示當(dāng)前value</text> <view class="body-view"> <slider bindchange="slider3change" show-value/> </view> </view> <view class="section section_gap"> <text class="section__title">設(shè)置最小/最大值</text> <view class="body-view"> <slider bindchange="slider4change" min="50" max="200" show-value/> </view> </view>
var pageData = {}
for(var i = 1; i < 5; ++i) {
(function (index) {
pageData[`slider${index}change`] = function(e) {
console.log(`slider${index}發(fā)生change事件，攜帶值為`, e.detail.value)
}
})(i);
}
Page(pageData)
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
這篇文章主要來(lái)帶大家探索JavaScript的未來(lái)，關(guān)于模式匹配的引入為編程體驗(yàn)帶來(lái)革命性變化分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-10
Nest.js 之依賴注入原理及實(shí)現(xiàn)過(guò)程詳解
這篇文章主要為大家介紹了Nest.js 之依賴注入原理及實(shí)現(xiàn)過(guò)程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
微信小程序 中wx.chooseAddress(OBJECT)實(shí)例詳解
這篇文章主要介紹了微信小程序 中wx.chooseAddress(OBJECT)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-03-03
Fabric.js?監(jiān)聽(tīng)元素是否相交重疊
這篇文章主要為大家介紹了Fabric.js?監(jiān)聽(tīng)元素是否相交重疊的方案示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了 微信小程序 Video API實(shí)例詳解,需要的朋友可以參考下2016-10-10
JavaScript復(fù)原何同學(xué)B站頭圖細(xì)節(jié)示例詳解
這篇文章主要為大家介紹了JavaScript復(fù)原何同學(xué)B站頭圖細(xì)節(jié)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了java Spring事務(wù)回滾的相關(guān)資料,需要的朋友可以參考下2016-10-10
微信小程序 頁(yè)面跳轉(zhuǎn)事件綁定的實(shí)例詳解
這篇文章主要介紹了微信小程序 頁(yè)面跳轉(zhuǎn)事件綁定的實(shí)例詳解的相關(guān)資料,希望通過(guò)本文大家能夠理解并應(yīng)用小程序頁(yè)面跳轉(zhuǎn)及事件綁定的實(shí)例，需要的朋友可以參考下2017-09-09
JS輕量級(jí)函數(shù)式編程實(shí)現(xiàn)XDM二
這篇文章主要為大家介紹了JS函數(shù)式編程實(shí)現(xiàn)XDM示例詳解第2/3篇，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要介紹了基于JavaScript阻止事件冒泡,事件冒泡?開(kāi)始時(shí)由最具體的元素接收，然后逐級(jí)向上傳播到到?DOM?最頂層節(jié)點(diǎn)。更多詳細(xì)內(nèi)容請(qǐng)需要的小伙伴參考下面文章的具體內(nèi)容希望對(duì)你有所幫助2021-12-12