更新记录

1.03（2026-02-02） 下载此版本

• 流畅体验：利用原生 swiper 组件，滑动跟手，性能好。
• 高度可配：支持自定义宽高、颜色、圆角、文字大小等。
• 状态管理：支持禁用状态、重置状态。
• 图标定制：支持自定义滑块图标，支持 slot 插槽。

1.02（2024-04-07） 下载此版本

更新兼容其他多端样式问题

1.01（2024-04-02） 下载此版本

样式优化具体查看代码

平台兼容性

uni-app(3.7.2)

其他

Slide Button 滑动确认组件

类似 iPhone 关机或接听电话时的滑动确认按钮，防止用户误触。通过 swiper 组件模拟流畅的滑动效果。

✨ 特性

• 流畅体验：利用原生 swiper 组件，滑动跟手，性能好。
• 高度可配：支持自定义宽高、颜色、圆角、文字大小等。
• 状态管理：支持禁用状态、重置状态。
• 图标定制：支持自定义滑块图标，支持 slot 插槽。

📦 引入

import slideButton from '@/components/linxinpeng-slide-button/linxinpeng-slide-button.vue'

export default {
    components: { slideButton }
}

💻 基础用法

基础示例

<slide-button 
    title="滑动解锁" 
    @confirm="handleConfirm"
></slide-button>

自定义样式

<slide-button 
    title="立即支付" 
    bg-color="#07c160" 
    height="120rpx"
    radius="60rpx"
    font-size="36rpx"
    @confirm="handlePay"
></slide-button>

禁用状态

<slide-button 
    title="处理中..." 
    disabled 
    bg-color="#ccc"
></slide-button>

使用方法重置

<template>
    <slide-button ref="slideBtn" @confirm="onConfirm"></slide-button>
</template>

<script>
export default {
    methods: {
        onConfirm() {
            console.log('Confirmed!');
            // 2秒后重置按钮
            setTimeout(() => {
                this.$refs.slideBtn.reset();
            }, 2000);
        }
    }
}
</script>

⚙️ API 配置项

📡 事件

🧩 插槽 (Slots)