小程序双头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 相关文章推荐
弹出广告特效代码(一个IP只弹出一次)
May 11 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
微信小程序顶部可滚动导航效果
Oct 31 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 判断IP为有效IP地址的方法
2018/01/28 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python自动安装pip
2014/04/24 Python
Django中使用Celery的教程详解
2018/08/24 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
.NET程序员的数据库面试题
2012/10/10 面试题
Java语言程序设计测试题判断题部分
2013/01/06 面试题
决心书范文
2014/03/11 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
企业领导对照检查材料
2014/08/20 职场文书
四查四看整改措施
2014/09/19 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
辞职信范文大全
2015/03/02 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
《打电话》教学反思
2016/02/22 职场文书
如何写好开幕词?
2019/06/24 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
Python实现制作销售数据可视化看板详解
2021/11/27 Python