微信小程序 slider 詳解及實例代碼
更新時間：2017年01月10日 15:18:02 投稿：lqh
這篇文章主要介紹了微信小程序 slider 詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下
微信小程序slider
相關(guān)文章：
實現(xiàn)效果圖：
滑動選擇器
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| min | Number | 0 | 最小值 |
| max | Number | 100 | 最大值 |
| step | Number | 1 | 步長，取值必須大于 0，并且可被 (max - min) 整除 |
| disabled | Boolean | false | 是否禁用 |
| value | Number | 0 | 當(dāng)前取值 |
| show-value | Boolean | false | 是否顯示當(dāng)前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">顯示當(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)
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
這篇文章主要為大家介紹了如何使用mock.js實現(xiàn)接口測試的自動化詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要為大家介紹了JS?class語法糖的深入剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
微信小程序 中wx.chooseAddress(OBJECT)實例詳解
這篇文章主要介紹了微信小程序 中wx.chooseAddress(OBJECT)實例詳解的相關(guān)資料,需要的朋友可以參考下2017-03-03
JS時間分片技術(shù)解決長任務(wù)導(dǎo)致的頁面卡頓
旨在把一個運(yùn)行時間比較長的任務(wù)分解成一塊一塊比較小的任務(wù)，分塊去執(zhí)行，因為超過 50ms 的任務(wù)就會被認(rèn)為是 long task，用戶就能感知到渲染卡頓和交互的卡頓，所以我們可以縮短函數(shù)的連續(xù)執(zhí)行時間2022-07-07
Flutter刷新組件RefreshIndicator自定義樣式demo
這篇文章主要介紹了Flutter刷新組件RefreshIndicator自定義樣式demo,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了JavaScript高級程序設(shè)計之變量與作用域，文章主要通過描述原始值與引用值、instanceof、作用域展開具體內(nèi)容,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了詳解微信小程序Radio選中樣式切換的相關(guān)資料,需要的朋友可以參考下2017-07-07
微信小程序 （一）新建項目hello WeApp 詳細(xì)介紹
這篇文章主要介紹了微信小程序 （一）hello WeApp 詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了微信小程序 藍(lán)牙的實現(xiàn)實例代碼的相關(guān)資料,需要的朋友可以參考下2017-06-06
reduce方法是JavaScript中一個比較強(qiáng)大的方法，可能在平時開發(fā)中，有人根本沒用過，通過下面的8個例子，學(xué)會reduce的用法以及它的常用場景,需要的朋友可以參考一下2021-09-09