更新记录

1.0.2(2025-07-22)

升级

1.0.1(2025-07-22)

修复显示问题。

1.0.0(2025-07-22)

发布

查看更多

平台兼容性

云端兼容性

阿里云 腾讯云 支付宝云

uni-app(4.06)

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(oldValue, newValue) 点击回调 oldValue为点击前的值,newValue为点击后的值。

快速应用

示例1
<ljs-radio-slider
    v-model="tag"
    height="68"
    fontSize="42"
    :margin="10"
    :padding="20"
    @radioClick="radioClick">
</ljs-radio-slider>
export default {
    data() {
        return {
            tag: true,
        }
    },
    watch: {
        tag: {
            handler(val) {
                console.log(this.tag);
            },
            deep: true,
            immediate: true
        }
    },
    onLoad() {
    },
    methods: {
        radioClick(oldValue, newValue) {
            console.log(oldValue, newValue);
        },
    }
}

贡献代码

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

隐私、权限声明

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

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

插件不采集任何数据

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

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