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