小程序雙頭slider選擇器的實(shí)現(xiàn)示例
小程序商城項(xiàng)目中，需要設(shè)置價(jià)格區(qū)間，或者在旅游行業(yè)項(xiàng)目中需要設(shè)置時(shí)間區(qū)間，雙頭選擇器有比較好的交互效果
- 支持設(shè)置單頭、雙頭選擇器
- 支持自定義選擇頭的文字/圖片
- 支持自定義軸
- 支持開(kāi)啟/關(guān)閉提示信息
- 支持事件綁定
示例代碼
https://github.com/webkixi/aotoo-xquery => pages/sslider
配置說(shuō)明
wxml
<ui-item item="{{sliderConfig}}" />
js
const Pager = require('../../components/aotoo/core/index')
const mkSslider = require('../../components/modules/sslider/index')
Pager({
data: {
rangeValue: '00',
sliderConfig: mkSslider({
id: '',
max: 10,
step: 1,
value: [0, 10],
blockSize: 30,
button: [{}, {}],
content: null,
bindchange: null,
bindchanging: null,
smooth: true,
tip: true,
disable: false,
frontColor: '#ccc',
backColor: '#2b832b'
}),
},
})
配置參數(shù)
調(diào)用 'mkSslider(param)' 方法生成slider的配置
id
{String} 定義唯一id，可以在onReady中拿到實(shí)例
max
{Number} 設(shè)置最大值
step
{Number} 設(shè)置步進(jìn)
value
{Array} 設(shè)置默認(rèn)值
blockSize
{Number} 設(shè)置選擇頭的大小，默認(rèn)30px
button
{Array} 數(shù)組長(zhǎng)度===1，為單頭slider，長(zhǎng)度===2為雙頭slider
content
{String|Object|item} 設(shè)置軸內(nèi)容，默認(rèn)為一條2px的線段，支持設(shè)置文字/圖片
bindchange
{Function} touchend綁定事件，返回value數(shù)組
bindchanging
{Function} touchmove綁定事件，實(shí)時(shí)返回value
smooth
{Boolean} touchmove時(shí)是否平滑渲染 默認(rèn) false
tip
{Boolean} 是否顯示提示
disable
{Boolean} 是否設(shè)置無(wú)效，無(wú)效后不能有任何操作
frontColor
{String} 前景色，軸線條選中后的顏色，默認(rèn) #ccc
backColor
{String} 背景色，軸線條默認(rèn)顏色，默認(rèn) #2b832b
如何使用
如何獲取實(shí)例
Pager({
data: {
slideConfig: mkSslider({ id: 'abc' })
},
onReady() {
console.log(this.abc.value)
}
})
設(shè)置最大值/步進(jìn)值
slideConfig: mkSslider({
max: 1000,
step: 50,
value: [0, 1000]
})
設(shè)置提示tip
slideConfig: mkSslider({
tip: true
})
設(shè)置默認(rèn)值
slideConfig: mkSslider({
value: [3, 8]
})
設(shè)置指示器大小
slideConfig: mkSslider({
blockSize: 40 // 默認(rèn)30
})
設(shè)置指示器文字/圖片
slideConfig: mkSslider({
button: ['爽', {img: {src: '/images/chat.png', itemStyle: 'width: 30px; border-raduis: 50%;'}}]
})
設(shè)置無(wú)效
slideConfig: mkSslider({
disable: true // 默認(rèn)有效
})
設(shè)置前景色/背景色
slideConfig: mkSslider({
frontColor: 'red',
backColor: 'blue'
})
設(shè)置綁定方法
slideConfig: mkSslider({
bindchange() {}, // touchend響應(yīng)
bindchanging() {} // touchmove響應(yīng)
})
如何設(shè)置單頭slider
slideConfig: mkSslider({
button: [{}]
})
示例小程序
到此這篇關(guān)于小程序雙頭slider選擇器的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)小程序雙頭slider選擇器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript十六進(jìn)制數(shù)字和ASCII字符之間的轉(zhuǎn)換方法
下面小編就為大家?guī)?lái)一篇javascript十六進(jìn)制數(shù)字和ASCII字符之間的轉(zhuǎn)換方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
原生JS實(shí)現(xiàn)各種運(yùn)動(dòng)之復(fù)合運(yùn)動(dòng)
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)各種運(yùn)動(dòng)之復(fù)合運(yùn)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
在javascript前端開(kāi)發(fā)中js函數(shù)問(wèn)題經(jīng)常會(huì)被討論，這個(gè)問(wèn)題仁者見(jiàn)仁智者見(jiàn)智，下面通過(guò)示例代碼給大家介紹js五大常見(jiàn)函數(shù)，感興趣的朋友一起看看吧2018-03-03
JS+HTML5實(shí)現(xiàn)的前端購(gòu)物車功能插件實(shí)例【附demo源碼下載】
這篇文章主要介紹了JS+HTML5實(shí)現(xiàn)的前端購(gòu)物車功能插件,結(jié)合完整實(shí)例形式分析了JS結(jié)合HTML5的storage特性存儲(chǔ)數(shù)據(jù)實(shí)現(xiàn)購(gòu)物車功能的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-10-10
這篇文章主要為大家詳細(xì)介紹了Ionic2開(kāi)發(fā)環(huán)境的搭建教程，文中步驟介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Google Map Api和GOOGLE Search Api整合實(shí)現(xiàn)代碼
將GOOGLE MAP API 和 GOOGLE Search API 進(jìn)行整合，我用面向?qū)ο蟮姆绞綄?xiě)了一個(gè)類，通過(guò)傳一個(gè)經(jīng)緯度進(jìn)去，自動(dòng)通過(guò)GOOGLE LOCAL SEARCH獲取附近的相關(guān)信息。比如餐廳、景點(diǎn)等，反過(guò)來(lái)標(biāo)到地圖上，并可在任意容器內(nèi)顯示。2009-07-07
用canvas 實(shí)現(xiàn)個(gè)圖片三角化（LOW POLY）效果
這篇文章主要介紹了用canvas 實(shí)現(xiàn)個(gè)圖片三角化（LOW POLY）效果 的相關(guān)資料,需要的朋友可以參考下2016-02-02
在真正的Web站點(diǎn)和應(yīng)用程序中，幾乎不可能創(chuàng)建名為ClassA和ClassB的類，更可能的是創(chuàng)建表示特定事物（如形狀）的類?？紤]本章開(kāi)頭所述的形狀的例子，Polygon、Triangle和Rectangle類就構(gòu)成了一組很好的探討數(shù)據(jù)。2009-08-08
javascript不同類型數(shù)據(jù)之間的運(yùn)算的轉(zhuǎn)換方法
這篇文章主要介紹了javascript不同類型數(shù)據(jù)之間的運(yùn)算的轉(zhuǎn)換方法,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了js中獲取一個(gè)月有多少天的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06