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

創(chuàng)新互聯(lián)建站是一家集成都做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)站頁面設(shè)計、網(wǎng)站優(yōu)化SEO優(yōu)化為一體的專業(yè)的建站公司，已為成都等多地近百家企業(yè)提供網(wǎng)站建設(shè)服務(wù)。追求良好的瀏覽體驗,以探求精品塑造與理念升華,設(shè)計最適合用戶的網(wǎng)站頁面。 合作只是第一步，服務(wù)才是根本,我們始終堅持講誠信，負責(zé)任的原則，為您進行細心、貼心、認真的服務(wù),與眾多客戶在蓬勃發(fā)展的市場環(huán)境中,互促共生。

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

示例代碼

https://github.com/webkixi/aotoo-xquery => pages/sslider

配置說明

wxml

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中拿到實例

max
{Number} 設(shè)置最大值

step
{Number} 設(shè)置步進

value
{Array} 設(shè)置默認值

blockSize
{Number} 設(shè)置選擇頭的大小，默認30px

button
{Array} 數(shù)組長度===1，為單頭slider，長度===2為雙頭slider

content
{String|Object|item} 設(shè)置軸內(nèi)容，默認為一條2px的線段，支持設(shè)置文字/圖片

bindchange
{Function} touchend綁定事件，返回value數(shù)組

bindchanging
{Function} touchmove綁定事件，實時返回value

smooth
{Boolean} touchmove時是否平滑渲染 默認 false

tip
{Boolean} 是否顯示提示

disable
{Boolean} 是否設(shè)置無效，無效后不能有任何操作

frontColor
{String} 前景色，軸線條選中后的顏色，默認 #ccc

backColor
{String} 背景色，軸線條默認顏色，默認 #2b832b

如何使用

如何獲取實例

Pager({
 data: {
  slideConfig: mkSslider({ id: 'abc' })
 },
 onReady() {
  console.log(this.abc.value)
 }
})

設(shè)置最大值/步進值

slideConfig: mkSslider({
 max: 1000,
 step: 50,
 value: [0, 1000]
})

設(shè)置提示tip

slideConfig: mkSslider({
 tip: true
})

設(shè)置默認值

slideConfig: mkSslider({
 value: [3, 8]
})

設(shè)置指示器大小

slideConfig: mkSslider({
 blockSize: 40 // 默認30
})

設(shè)置指示器文字/圖片

slideConfig: mkSslider({
 button: ['爽', {img: {src: '/images/chat.png', itemStyle: 'width: 30px; border-raduis: 50%;'}}]
})

設(shè)置無效

slideConfig: mkSslider({
 disable: true // 默認有效
})

設(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選擇器的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)小程序雙頭slider選擇器內(nèi)容請搜索創(chuàng)新互聯(lián)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持創(chuàng)新互聯(lián)！