slider.uvue

<script>
export default {
  data() {
    return {
      sliderValue: 50,
      sliderBlockSize: 20,
      sliderBackgroundColor: "#000000",
      sliderActiveColor: "#FFCC33",
      sliderBlockColor: "#8A6DE9",
      // 组件属性 autotest
      show_value_boolean: false,
      disabled_boolean: false,
      min_input: 0,
      max_input: 100,
      step_input: 1,
      value_input: 0,
      activeColor_input: "#007aff",
      backgroundColor_input: "#e9e9e9",
      block_size_input: 28,
      block_color_input: "#ffffff",
    };
  },
  methods: {
    sliderChange(e: SliderChangeEvent) {
      console.log("value 发生变化：" + e.detail.value);
    },
    slider_click() {
      console.log("组件被点击时触发");
    },
    slider_touchstart() {
      console.log("手指触摸动作开始");
    },
    slider_touchmove() {
      console.log("手指触摸后移动");
    },
    slider_touchcancel() {
      console.log("手指触摸动作被打断，如来电提醒，弹窗");
    },
    slider_touchend() {
      console.log("手指触摸动作结束");
    },
    slider_tap() {
      console.log("手指触摸后马上离开");
    },
    slider_longpress() {
      console.log(
        "如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。"
      );
    },
    slider_change() {
      console.log("完成一次拖动后触发的事件，event.detail = {value: value}");
    },
    slider_changing() {
      console.log("拖动过程中触发的事件，event.detail = {value: value}");
    },
    change_show_value_boolean(checked: boolean) {
      this.show_value_boolean = checked;
    },
    change_disabled_boolean(checked: boolean) {
      this.disabled_boolean = checked;
    },
    confirm_min_input(value: number) {
      this.min_input = value;
    },
    confirm_max_input(value: number) {
      this.max_input = value;
    },
    confirm_step_input(value: number) {
      this.step_input = value;
    },
    confirm_value_input(value: number) {
      this.value_input = value;
    },
    confirm_activeColor_input(value: string) {
      this.activeColor_input = value;
    },
    confirm_backgroundColor_input(value: string) {
      this.backgroundColor_input = value;
    },
    confirm_block_size_input(value: number) {
      this.block_size_input = value;
    },
    confirm_block_color_input(value: string) {
      this.block_color_input = value;
    },
  },
};
</script>

<template>
  <view class="main">
    <slider
      :disabled="disabled_boolean"
      :min="min_input"
      :max="max_input"
      :step="step_input"
      :value="value_input"
      :activeColor="activeColor_input"
      :backgroundColor="backgroundColor_input"
      :block-size="block_size_input"
      :block-color="block_color_input"
      :show-value="show_value_boolean"
      @click="slider_click"
      @touchstart="slider_touchstart"
      @touchmove="slider_touchmove"
      @touchcancel="slider_touchcancel"
      @touchend="slider_touchend"
      @tap="slider_tap"
      @longpress="slider_longpress"
      @change="slider_change"
      @changing="slider_changing"
      style="width: 90%"
      ><text>uni-app-x</text></slider
    >
  </view>

  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
    <!-- #endif -->
    <view class="content nvue">
      <page-head title="组件属性"></page-head>
      <boolean-data
        :defaultValue="false"
        title="是否显示当前 value"
        @change="change_show_value_boolean"
      ></boolean-data>
      <boolean-data
        :defaultValue="false"
        title="是否禁用"
        @change="change_disabled_boolean"
      ></boolean-data>
      <input-data
        defaultValue="0"
        title="slider 最小值"
        type="number"
        @confirm="confirm_min_input"
      ></input-data>
      <input-data
        defaultValue="100"
        title="slider 最大值"
        type="number"
        @confirm="confirm_max_input"
      ></input-data>
      <input-data
        defaultValue="1"
        title="slider 步长，取值必须大于 0，并且可被(max - min)整除"
        type="number"
        @confirm="confirm_step_input"
      ></input-data>
      <input-data
        defaultValue="0"
        title="radio当前取值"
        type="number"
        @confirm="confirm_value_input"
      ></input-data>
      <input-data
        defaultValue="#007aff"
        title="slider 滑块左侧已选择部分的线条颜色"
        type="text"
        @confirm="confirm_activeColor_input"
      ></input-data>
      <input-data
        defaultValue="#e9e9e9"
        title="radio背景条的颜色"
        type="text"
        @confirm="confirm_backgroundColor_input"
      ></input-data>
      <input-data
        defaultValue="28"
        title="radio滑块的大小，取值范围为 12 - 28"
        type="number"
        @confirm="confirm_block_size_input"
      ></input-data>
      <input-data
        defaultValue="#ffffff"
        title="滑块颜色"
        type="text"
        @confirm="confirm_block_color_input"
      ></input-data>
    </view>

    <view class="uni-padding-wrap">
      <page-head title="默认及使用"></page-head>
      <view class="uni-title">显示当前value</view>
      <view>
        <slider @change="sliderChange" :value="50" :show-value="true" />
      </view>

      <view class="uni-title">设置步进:step=10跳动</view>
      <view>
        <view class="uni-row">
          <text>0</text>
          <text class="m-l-a">100</text>
        </view>
        <slider @change="sliderChange" :value="60" :step="10" />
      </view>

      <view class="uni-title">设置最小/最大值</view>
      <view>
        <slider
          @change="sliderChange"
          :value="100"
          :min="50"
          :max="200"
          :show-value="true"
        />
      </view>

      <view class="uni-title">不同颜色和大小的滑块</view>
      <view>
        <slider
          class="slider-custom-color-and-size"
          @change="sliderChange"
          :value="sliderValue"
          :backgroundColor="sliderBackgroundColor"
          :activeColor="sliderActiveColor"
          :blockColor="sliderBlockColor"
          :block-size="sliderBlockSize"
        />
      </view>
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<style>
.main {
  max-height: 500rpx;
  padding: 10rpx 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-direction: row;
  justify-content: center;
}

.main .list-item {
  width: 100%;
  height: 200rpx;
  border: 1px solid #666;
}

.m-l-a {
  margin-left: auto;
}
</style>