uni-app 垂直方向（上下滑动）的slider组件

在uni-app中，虽然官方没有直接提供一个垂直方向的slider组件，但我们可以通过自定义组件和一些CSS样式来实现这一功能。下面是一个基本的实现示例，展示如何创建一个垂直方向的滑动条组件。

首先，我们创建一个名为VerticalSlider.vue的自定义组件：

<template>
  <view class="slider-container">
    <view
      class="slider-thumb"
      :style="{ top: `${position}%` }"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
    ></view>
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {
      startY: 0,
      startYValue: 0,
      dragging: false
    };
  },
  computed: {
    position() {
      const range = this.max - this.min;
      return ((this.value - this.min) / range) * 100;
    }
  },
  methods: {
    onTouchStart(e) {
      this.startY = e.touches[0].clientY;
      this.startYValue = this.value;
      this.dragging = true;
    },
    onTouchMove(e) {
      if (!this.dragging) return;
      const deltaY = e.touches[0].clientY - this.startY;
      const newValue = this.startYValue + (deltaY / window.innerHeight) * (this.max - this.min);
      this.$emit('input', Math.max(this.min, Math.min(this.max, newValue)));
    },
    onTouchEnd() {
      this.dragging = false;
    }
  }
};
</script>

<style scoped>
.slider-container {
  width: 20px;
  height: 200px;
  position: relative;
  background-color: #ddd;
}
.slider-thumb {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: #3cc51f;
  border-radius: 50%;
}
</style>

在父组件中使用这个自定义的垂直滑动条组件：

<template>
  <view>
    <VerticalSlider v-model="sliderValue" :min="0" :max="100" />
    <text>Value: {{ sliderValue }}</text>
  </view>
</template>

<script>
import VerticalSlider from '@/components/VerticalSlider.vue';

export default {
  components: {
    VerticalSlider
  },
  data() {
    return {
      sliderValue: 50
    };
  }
};
</script>

这个示例展示了如何创建一个简单的垂直方向滑动条组件，并通过触摸事件来处理滑动操作。你可以根据需要进一步调整和扩展这个组件。