小程序双头slider选择器的实现示例


Posted in Javascript onMarch 31, 2020

小程序商城项目中,需要设置价格区间,或者在旅游行业项目中需要设置时间区间,双头选择器有比较好的交互效果

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

示例小程序

小程序双头slider选择器的实现示例

到此这篇关于小程序双头slider选择器的实现示例的文章就介绍到这了,更多相关小程序双头slider选择器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
小程序绑定用户方案优化小结
May 15 Javascript
JS实现随机抽选获奖者
Nov 07 Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 Javascript
JavaScript实现电灯开关小案例
Mar 30 #Javascript
javascript实现计算器功能
Mar 30 #Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 #Javascript
记一次react前端项目打包优化的方法
Mar 30 #Javascript
12 种使用Vue 的最佳做法
Mar 30 #Javascript
javascript实现简易数码时钟
Mar 30 #Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 #Javascript
You might like
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
php var_export与var_dump 输出的不同
2013/08/09 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
python实现对一个完整url进行分割的方法
2015/04/29 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
python实现多层感知器
2019/01/18 Python
Python猜数字算法题详解
2020/03/01 Python
快速解决jupyter启动卡死的问题
2020/04/10 Python
Django在Model保存前记录日志实例
2020/05/14 Python
python如何输出反斜杠
2020/06/18 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
软件毕业生个人鉴定
2014/03/03 职场文书
银行办公室岗位职责
2014/03/10 职场文书
《恐龙》教学反思
2014/04/27 职场文书
大专毕业生求职信
2014/07/05 职场文书
授权委托书
2014/09/17 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
质量保证书格式模板
2015/02/27 职场文书