小程序双头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 相关文章推荐
js点击更换背景颜色或图片的实例代码
Jun 25 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
javascript使用onclick事件改变选中行的颜色
Dec 30 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
Jul 22 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
shiro授权的实现原理
Sep 21 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 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和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
php解决DOM乱码的方法示例代码
2016/11/20 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
js DOM模型操作
2009/12/28 Javascript
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
手把手教你如何编译打包video.js
2020/12/09 Javascript
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
Python实现控制台输入密码的方法
2015/05/29 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
python机器学习之贝叶斯分类
2018/03/26 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
SQL注入攻击的种类有哪些
2013/12/30 面试题
给水工程专业毕业生自荐信
2014/01/28 职场文书
民间借贷被告代理词
2015/05/23 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
pycharm代码删除恢复的方法
2021/06/26 Python
各国货币符号大全
2022/02/17 杂记