SliderButton 滑动按钮

约 910 字大约 3 分钟

2025-10-31

滑动验证按钮组件，常用于验证用户操作，通过滑动滑块到指定位置来完成验证。

基本使用

通过 text 属性设置按钮文字，监听 success 事件处理验证成功逻辑。

<template>
  <view>
    <un-slider-button 
      text="滑动解锁"
      @success="onSliderSuccess"
      @reset="onSliderReset"
    />
  </view>
</template>

<script>
export default {
  methods: {
    onSliderSuccess() {
      uni.showToast({
        title: '滑动验证成功！',
        icon: 'success'
      });
    },
    onSliderReset() {
      console.log('滑动按钮已重置');
    }
  }
};
</script>

自定义样式

通过多个属性可以自定义按钮的外观样式。

<template>
  <view>
    <un-slider-button 
      text="开始出发"
      :height="45"
      bgColor="rgb(230, 27, 47)"
      textColor="#ffffff"
      :textBold="true"
      zIndex="10"
      threshold="150"
      activeBgColor="rgba(230, 27, 47, 0.85)"
      @success="onCustomSuccess"
    />
  </view>
</template>

<script>
export default {
  methods: {
    onCustomSuccess() {
      uni.showToast({
        title: '自定义样式验证成功！',
        icon: 'success'
      });
    }
  }
};
</script>

禁用状态

通过 disabled 属性可以禁用滑动按钮。

<template>
  <view>
    <un-slider-button 
      text="已禁用"
      :width="300"
      :height="50"
      :disabled="true"
    />
  </view>
</template>

自动重置

通过 autoReset 属性可以设置验证成功后自动重置，resetDelay 设置重置延迟时间。

<template>
  <view>
    <un-slider-button 
      text="滑动验证"
      :autoReset="true"
      @success="onSuccess"
    />
  </view>
</template>

<script>
export default {
  methods: {
    onSuccess() {
      console.log('验证成功，3秒后自动重置');
    }
  }
};
</script>

自定义滑块

通过 thumb 插槽可以自定义滑块内容。

<template>
  <view>
    <un-slider-button text="滑动解锁" @success="onSuccess">
      <template #thumb>
        <view class="custom-thumb">
          <un-icon name="arrow-right" color="#007AFF" size="20"></un-icon>
        </view>
      </template>
    </u-slider-button>
  </view>
</template>

<style>
.custom-thumb {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>

自定义文字

通过插槽可以自定义按钮文字内容。

<template>
  <view>
    <un-slider-button @success="onSuccess">
        <view class="custom-text">
          <un-icon name="lock" size="16" color="#999"></un-icon>
          <text style="margin-left: 8px;">滑动解锁</text>
        </view>
    </u-slider-button>
  </view>
</template>

<style>
.custom-text {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

页面源码地址

github

gitee

API

Props

参数	说明	类型	默认值
text	按钮文字	String	滑动解锁
width	按钮宽度	String \| Number	-
height	按钮高度	String \| Number	45
round	圆角	String \| Number	100
bgColor	背景颜色	String	#e0e0e0
railIndex	滑道层级	String \| Number	-
railColor	滑道颜色	String	主题色
railRadius	滑道圆角	String \| Number	100
textColor	文字颜色	String	#c2c2c2
activeTextColor	激活文字颜色	String	#ffffff
fontSize	文字大小	String \| Number	16
textBold	文字是否加粗	Boolean	false
disabled	是否禁用	Boolean	false
successText	成功文字	String	验证成功
autoReset	是否自动重置	Boolean	false
resetDelay	重置延迟时间（毫秒）	Number	2000
threshold	阈值，该阈值并不是滑动距离，而是超过总宽度的比例	Number	0.5

Events

事件名	说明	回调参数
change	滑动过程中触发	percent: 滑动进度百分比(0-1)
success	滑动验证成功时触发	-
reset	滑动重置时触发	-

Slots

名称	说明
thumb	自定义滑块内容
default	自定义文字内容

Methods

方法名	说明	参数	返回值
reset	重置滑动按钮	-	-

Scss 变量

变量名	默认值	说明
$un-slider-button-bg-color	$bg-color	按钮背景颜色
$un-slider-button-rail-bg-color	$color-primary	滑道背景颜色
$un-slider-button-thumb-inner-bg-color	#ffffff	滑块内部背景颜色
$un-slider-button-thumb-inner-size-offset	8px	滑块内部尺寸偏移
$un-slider-button-z-index-rail	10	滑道层级
$un-slider-button-z-index-text	1	文字层级

提示

组件内部默认使用 scss 变量，如需修改，请查看 scss 变量使用文档