更新记录

1.0.4(2023-07-29)

优化拖动中间滑不到端点的情况

1.0.3(2023-07-24)

文档更新

1.0.2(2023-07-24)

支持范围可拖动

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

lx-slider

一个双向滑块组件,可以滑动进行区间范围取值


lx-slider


属性props:

属性 类型 默认值 说明
value/v-model [number,number] [0,0] 滑块范围选中的值
min number 0 最小值
max number 100 最大值
step number 1 步长,取值必须大于 0
isShowToolTip boolean true 是否显示tooltip
showToolTipType 'always' | 'moving-1' | 'moving-2' always 显示tooltip类型('always' 两个一直显示; 'moving-1' 只显示正在滑动的 ;'moving-2' 滑动两个都显示,停止滑动都隐藏)
disabled boolean false 禁止滑动
disabledTrain boolean true 禁止中间可拖动,默认禁止
gap number null 设置两个滑块之间滑动最小间隔,默认不限制
slideRailStyle object {} 滑轨样式对象
slideTrainStyle object {} 两个滑块中间样式对象
slideHandleStyle object {} 滑块样式对象
slideTooltipStyle object {} tooltip样式对象

事件:

事件名 说明
input 滑动时触发 。([number,number]) => {}

简单示例:

<template>
    <view class="content">
        <lx-slider v-model="range" :min="0" :max="100" :step="20"></lx-slider>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                range: [0, 50]
            }
        }
    }
</script>

<style lang="scss">
    .content {
        margin-top: 100rpx;
        padding: 60rpx;
    }
</style>

后续计划:

1.支持其他小程序

最后:

如使用过程中有任何问题,或者有一些好的建议,可评论区讨论

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问