vue,uni-app双向滑动,小程序,区间slider,range

简介

1.有些项目涉及到价格选择,需要用到区间滑动,s-region-slider是基于uni-app开发的slider, 脱离了原生的slider,使用纯view+css+js开发的插件,
2.另外,脱离uni-app,还有vue版本,在vue项目中需要用npm安装使用(vue-region-slider);

在uni-app中使用兼容性说明

s-region-slider 在pc、H5-mobile、微信小程序、支付宝小程序、字节跳动小程序均已测试通过，其他平台没做过测试,如使用的时候碰到问题,可提出反馈,作者会及时调整。

源碼

uni-app - HbuiderX 导入 / 项目示例

导入方法

使用

import sllRegionSlider from '@/components/s-region-slider/s-region-slider.vue';

在纯vue项目使用说明

npm i -S vue-region-slider;

// mian.js
import vueRegionSlider from 'vue-region-slider'
import 'vue-region-slider/vue-region-slider/vue-region-slider.css'
Vue.use(vueRegionSlider)

// template.vue
<vue-region-slider :minValue="300" :maxValue="700" :step="40" @up="up"  @down="down"  @move="move" />

方法说明

属性

名	类型	说明	默认
fillValue	number	最大范围	1000
maxValue	number	滑块最大默认值	1000
minValue	number	滑块最小默认值	0
step	number	滑动后显示的数值只能是step倍数,例如:金额只能是10的倍数的时候,step可以设置为10	50

事件

名	说明	event
down	触发touchstart方法	返回了原有的event信息, 并添加了custom对象
move	触发touchmove方法	返回了原有的event信息, 并添加了custom对象
up	触发touchend方法	返回了原有的event信息, 并添加了custom对象

e.custom 说明

名	说明	event
type	当前触发的事件中是哪个滑块 ,(‘min’/‘max’)
minValue	左边滑块的值
maxValue	右边滑块的值
curValue	互动过程中的值, 注:此项只有move方法中才会有值,down和up不存在curValue

使用案例

<view style="margin-top:200rpx;padding:100rpx;">
	<s-region-slider :minValue="minValue" :maxValue="maxValue" :step="40" @up="up"  @down="down"  @move="move" />
	<button @click="setValue">点击按钮修改数值</button>
</view>

	export default {
		components: {sRegionSlider},
		data(){
			return {
				minValue:300,
				maxValue:700
			}
		},
		methods: {
			setValue(){
				this.minValue = 100;
				this.maxValue= 800;
			},
			down(e){
				// e中包含了原有的e信息, 并添加了custom对象
				const type = e.custom.type;
				const minValue = e.custom.minValue;
				const maxValue = e.custom.maxValue ;			
			},
			up(e){
				// e中包含了原有的e信息, 并添加了custom对象
				const type = e.custom.type;
				const minValue = e.custom.minValue;
				const maxValue = e.custom.maxValue ;		
				const curValue  = e.custom.curValue  ;	
			},
			move(e){
				// e中包含了原有的e信息, 并添加了custom对象
				const type = e.custom.type;
				const minValue = e.custom.minValue;
				const maxValue = e.custom.maxValue ;		
			},
		}
	}

运行到各端的效果图

以下是各端的动态图,微信小程序,支付宝小程序,浏览器,apk
在这里插入图片描述

酒店选择价格区间:
在这里插入图片描述