小程序双头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源码

示例小程序