小程序雙頭slider選擇器的實(shí)現(xiàn)示例

小程序商城項(xiàng)目中，需要設(shè)置價(jià)格區(qū)間，或者在旅游行業(yè)項(xiàng)目中需要設(shè)置時(shí)間區(qū)間，雙頭選擇器有比較好的交互效果

• 支持設(shè)置單頭、雙頭選擇器
• 支持自定義選擇頭的文字/圖片
• 支持自定義軸
• 支持開啟/關(guān)閉提示信息
• 支持事件綁定

示例代碼

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'
  }),
 },
})

配置參數(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: [{}]
})

GITHUB源碼

示例小程序

到此這篇關(guān)于小程序雙頭slider選擇器的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)小程序雙頭slider選擇器內(nèi)容請(qǐng)搜索億速云以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持億速云！