溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小程序商城項目中，需要設置價格區間，或者在旅游行業項目中需要設置時間區間，雙頭選擇器有比較好的交互效果
示例代碼
https://github.com/webkixi/aotoo-xquery => pages/sslider
配置說明
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'
}),
},
})
配置參數
調用 'mkSslider(param)' 方法生成slider的配置
id
{String} 定義唯一id，可以在onReady中拿到實例
max
{Number} 設置最大值
step
{Number} 設置步進
value
{Array} 設置默認值
blockSize
{Number} 設置選擇頭的大小，默認30px
button
{Array} 數組長度===1，為單頭slider，長度===2為雙頭slider
content
{String|Object|item} 設置軸內容，默認為一條2px的線段，支持設置文字/圖片
bindchange
{Function} touchend綁定事件，返回value數組
bindchanging
{Function} touchmove綁定事件，實時返回value
smooth
{Boolean} touchmove時是否平滑渲染 默認 false
tip
{Boolean} 是否顯示提示
disable
{Boolean} 是否設置無效，無效后不能有任何操作
frontColor
{String} 前景色，軸線條選中后的顏色，默認 #ccc
backColor
{String} 背景色，軸線條默認顏色，默認 #2b832b
如何使用
如何獲取實例
Pager({
data: {
slideConfig: mkSslider({ id: 'abc' })
},
onReady() {
console.log(this.abc.value)
}
})
設置最大值/步進值
slideConfig: mkSslider({
max: 1000,
step: 50,
value: [0, 1000]
})
設置提示tip
slideConfig: mkSslider({
tip: true
})
設置默認值
slideConfig: mkSslider({
value: [3, 8]
})
設置指示器大小
slideConfig: mkSslider({
blockSize: 40 // 默認30
})
設置指示器文字/圖片
slideConfig: mkSslider({
button: ['爽', {img: {src: '/images/chat.png', itemStyle: 'width: 30px; border-raduis: 50%;'}}]
})
設置無效
slideConfig: mkSslider({
disable: true // 默認有效
})
設置前景色/背景色
slideConfig: mkSslider({
frontColor: 'red',
backColor: 'blue'
})
設置綁定方法
slideConfig: mkSslider({
bindchange() {}, // touchend響應
bindchanging() {} // touchmove響應
})
如何設置單頭slider
slideConfig: mkSslider({
button: [{}]
})
GITHUB源碼
示例小程序
到此這篇關于小程序雙頭slider選擇器的實現示例的文章就介紹到這了,更多相關小程序雙頭slider選擇器內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
