当前位置：首页 > uni-app

uniapp 滑块

2026-03-26 15:11:21uni-app

uniapp 滑块组件使用指南

在 uniapp 中实现滑块功能，可以使用官方提供的 slider 组件或通过自定义组件实现。以下是具体方法和示例代码：

使用官方 slider 组件

uniapp 内置了 slider 组件，适用于简单的滑块需求。基本属性包括 min（最小值）、max（最大值）、step（步长）和 value（当前值）。

<template>
  <view>
    <slider 
      :value="sliderValue" 
      min="0" 
      max="100" 
      step="1" 
      @change="onSliderChange"
      activeColor="#FF0000"
    />
    <text>当前值：{{ sliderValue }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      sliderValue: 50
    }
  },
  methods: {
    onSliderChange(e) {
      this.sliderValue = e.detail.value
    }
  }
}
</script>

自定义滑块组件

如果需要更复杂的交互效果，可以通过 touch 事件和 CSS 实现自定义滑块。

<template>
  <view class="slider-container">
    <view class="slider-track">
      <view 
        class="slider-thumb" 
        :style="{ left: thumbPosition + '%' }"
        @touchstart="handleTouchStart"
        @touchmove="handleTouchMove"
      ></view>
    </view>
    <text>当前值：{{ currentValue }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentValue: 50,
      thumbPosition: 50,
      startX: 0
    }
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX
    },
    handleTouchMove(e) {
      const deltaX = e.touches[0].clientX - this.startX
      const percent = Math.min(100, Math.max(0, this.thumbPosition + deltaX / 5))
      this.thumbPosition = percent
      this.currentValue = Math.round(percent)
    }
  }
}
</script>

<style>
.slider-container {
  padding: 20px;
}
.slider-track {
  height: 4px;
  background-color: #e4e4e4;
  position: relative;
  border-radius: 2px;
}
.slider-thumb {
  width: 20px;
  height: 20px;
  background-color: #FF0000;
  border-radius: 50%;
  position: absolute;
  top: -8px;
  transform: translateX(-50%);
}
</style>

第三方组件库

对于更丰富的功能，可以引入第三方组件库如 uView UI 或 uni-ui。以 uView 的滑块组件为例：

uniapp 滑块

<template>
  <view>
    <u-slider 
      v-model="value" 
      :min="0" 
      :max="100"
      :block-width="24"
    ></u-slider>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: 30
    }
  }
}
</script>