SliderButton 滑动按钮 | uView Next - 企业级、高质量、更贴近业务场景的 uniapp ui框架

# SliderButton 滑动按钮 3.6.12

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

# 平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

# 基本使用

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

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

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

# 自定义样式

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

<template>
  <view>
    <u-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>
✅ Copy success!

# 禁用状态

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

<template>
  <view>
    <u-slider-button 
      text="已禁用"
      :width="300"
      :height="50"
      :disabled="true"
    />
  </view>
</template>
✅ Copy success!

# 自动重置

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

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

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

# 自定义滑块

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

<template>
  <view>
    <u-slider-button text="滑动解锁" @success="onSuccess">
      <template #thumb>
        <view class="custom-thumb">
          <u-icon name="arrow-right" color="#007AFF" size="20"></u-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>
✅ Copy success!

# 自定义文字

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

<template>
  <view>
    <u-slider-button @success="onSuccess">
        <view class="custom-text">
          <u-icon name="lock" size="16" color="#999"></u-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>
✅ Copy success!

# 页面源码地址

页面源码地址

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	true
disabled	是否禁用	Boolean	false	true
successText	成功文字	String	验证成功	-
autoReset	是否自动重置	Boolean	false	true
resetDelay	重置延迟时间（毫秒）	Number	2000	-
threshold	阈值	String \| Number	-	-

# Events

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

# Slots

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

# Methods

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

← InputTag 输入标签 Poster 海报生成器 →