小程序雙頭slider選擇器

小程序商城項目中，須要設置價格區間，或者在旅遊行業項目中須要設置時間區間，雙頭選擇器有比較好的交互效果

• 支持設置單頭、雙頭選擇器
• 支持自定義選擇頭的文字/圖片
• 支持自定義軸
• 支持開啓/關閉提示信息
• 支持事件綁定

示例代碼

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源碼

示例小程序