更新记录

1.1.0(2025-08-11) 下载此版本

免费

1.0.4(2025-08-04) 下载此版本

升级文档

1.0.3(2025-08-04) 下载此版本

升级

查看更多

平台兼容性

uni-app(4.07)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - - - - - - - -

其他

多语言 暗黑模式 宽屏模式
× ×

方便您的同时,请五星、收藏,让好的东西照亮更多深渊中负重前行的代码人。

创作不易,在您方便之际,赞赏作者,我们会更有动力继续下去。

简介

ljs-radio-slider,radio滑块组件。可灵活自定义滑块样式。

使用 uni_modules 安装(推荐)

使用 uni_modules 方式安装组件库,可以直接通过插件市场导入,通过右键菜单快速更新组件,不需要引用、注册,直接在页面中使用 ljs-radio-slider组件。

主参数

参数 类型 必填项 默认值 说明
v-model Boolean, String, Number 滑块值
height String, Number × 38 高度,Number类型单位为rpx。
fontSize String, Number × 22 字号,Number类型单位为rpx。
margin Number × 4 圆点于边界的距离,单位为rpx。
padding Number × 10 文字左右两边的空间距离,单位为rpx。
texts Array × ['是', '否'] 文字,v-model是true时使用索引0,为false时使用索引1。
bgColor Array × ['#2350DF', '#F7F6FC'] 背景颜色,v-model是true时使用索引0,为false时使用索引1。
fontColor Array × ['#FFF', '#333'] 文字颜色,v-model是true时使用索引0,为false时使用索引1。
valueTypes Array × [true, false] value的值的数组,v-model需于valueTypes对应类型。
barColor String × #FFF bar的颜色。
barShadow String × 0 0 2upx 3upx rgba(0, 0, 0, .1) bar的阴影。
radioClick Function × radio点击事件。状态变更前的控制函数,返回true状态可正常切换,返回false则阻止切换状态。

方法

参数 类型 解释
@radioChange(oldValue, newValue) 点击回调 oldValue为点击前的值,newValue为点击后的值。

快速应用

示例1
<ljs-radio-slider
    v-model="tag"
    height="68"
    fontSize="42"
    :margin="10"
    :padding="20"
    @radioChange="radioChange">
</ljs-radio-slider>
export default {
    data() {
        return {
            tag: true,
        }
    },
    methods: {
        radioChange(oldValue, newValue) {
            console.log(oldValue, newValue);
        },
    }
}
示例radioClick应用
<ljs-radio-slider
    v-model="tag"
    :radioClick="radioClick">
</ljs-radio-slider>
export default {
    data() {
        return {
            tag: true,
        }
    },
    methods: {
        async radioClick() {
            return new Promise((resolve, reject) => {
                setTimeout(function() {
                    resolve(true)
                }, 2000);
            })
        }
    }
}

贡献代码

龙九山。有任何问题,请在平台留言,在手头宽裕得情况下,我会尽快修复问题。

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议