更新记录

1.0.0（2025-11-28） 下载此版本

首次创建插件，满足用户滑动解锁

平台兼容性

uni-app(4.0)

滑动解锁组件 (SlideUnlock)

一个支持多平台的滑动解锁组件，适用于 uni-app 开发的 App、微信小程序、支付宝小程序、抖音小程序等平台。

功能特性

✅ 流畅的触摸滑动交互
✅ 自定义样式和主题
✅ 解锁成功/失败回调
✅ 重置功能
✅ 震动反馈（App 和微信小程序）
✅ 多平台兼容

快速开始

1. 引入组件

<template>
  <slide-unlock @success="onSuccess"></slide-unlock>
</template>

<script>
import SlideUnlock from "@/components/slide-unlock/slide-unlock.vue";

export default {
  components: {
    SlideUnlock,
  },
  methods: {
    onSuccess() {
      console.log("解锁成功");
    },
  },
};
</script>

2. 在 pages.json 中注册示例页面（可选）

{
  "pages": [
    {
      "path": "pages/demo/slide-unlock-demo",
      "style": {
        "navigationBarTitleText": "滑动解锁示例"
      }
    }
  ]
}

Props 属性

Events 事件

Methods 方法

方法调用示例

<template>
  <view>
    <slide-unlock ref="slideUnlock"></slide-unlock>
    <button @click="reset">重置</button>
  </view>
</template>

<script>
export default {
  methods: {
    reset() {
      this.$refs.slideUnlock.reset();
    },
  },
};
</script>

使用示例

基础用法

<slide-unlock @success="onUnlockSuccess" @fail="onUnlockFail"></slide-unlock>

自定义样式

<slide-unlock
  width="700rpx"
  height="100rpx"
  bgColor="linear-gradient(to right, #fff1f1, #ffe6e6)"
  btnColor="#ff4444"
  textColor="#ff4444"
  text="向右滑动验证"
  successText="验证成功"
  icon="→"
  @success="onSuccess"
></slide-unlock>

绿色主题

<slide-unlock
  bgColor="linear-gradient(to right, #e8f5e9, #f1f8f4)"
  btnColor="#4CAD43"
  textColor="#4CAD43"
  text="滑动确认操作"
  @success="onSuccess"
></slide-unlock>

禁用状态

<slide-unlock disabled text="已禁用"></slide-unlock>

平台兼容性

注意事项

1. 尺寸单位：建议使用 rpx 作为单位，可自动适配不同屏幕
2. 震动反馈：仅在 App 和微信小程序中生效
3. 渐变色：所有平台都支持 CSS 渐变
4. 重置功能：通过 ref 调用 reset() 方法可重置组件状态

文件位置

• 组件文件: components/slide-unlock/slide-unlock.vue
• 示例页面: pages/demo/slide-unlock-demo.vue