EveryLike/pages/component/slider/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",
        valueColor: "#888888",
      };
    },
    methods: {
      sliderChange(e : UniSliderChangeEvent) {
        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;
      },
      confirm_value_color_input(value : string) {
        this.valueColor = 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" :valueColor="valueColor" @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%"></slider>
  </view>

  <scroll-view style="flex: 1">
    <view class="content">
      <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="最小值(min)" type="number" @confirm="confirm_min_input"></input-data>
      <input-data defaultValue="100" title="最大值(max)" type="number" @confirm="confirm_max_input"></input-data>
      <input-data defaultValue="1" title="步长(step)，取值必须大于 0，并且可被(max - min)整除" type="number"
        @confirm="confirm_step_input"></input-data>
      <input-data defaultValue="0" title="当前取值(value)" type="number" @confirm="confirm_value_input"></input-data>
      <input-data defaultValue="#007aff" title="滑块左侧已选择部分的线条颜色(active-color)" type="text"
        @confirm="confirm_activeColor_input"></input-data>
      <input-data defaultValue="#e9e9e9" title="背景条的颜色(background-color)" type="text"
        @confirm="confirm_backgroundColor_input"></input-data>
      <input-data defaultValue="28" title="滑块的大小(block-size)，取值范围为 12 - 28" type="number"
        @confirm="confirm_block_size_input"></input-data>
      <input-data defaultValue="#ffffff" title="滑块颜色(block-color)" type="text"
        @confirm="confirm_block_color_input"></input-data>
      <input-data defaultValue="#888888" title="Value颜色(value-color)" type="text"
        @confirm="confirm_value_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">浮点步进:step=0.01跳动</view>
      <view>
        <slider :value="0.5" :min="0" :max="1" :step="0.01" :show-value="true" />
      </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 id="slider-custom-color-and-size" @change="sliderChange" :value="sliderValue"
          :backgroundColor="sliderBackgroundColor" :activeColor="sliderActiveColor"
          :activeBackgroundColor="sliderActiveColor" :blockColor="sliderBlockColor" :foreColor="sliderBlockColor"
          :block-size="sliderBlockSize" />
      </view>
      <view class="uni-title">暗黑模式</view>
      <view>
        <slider :show-value="true" backgroundColor="rgba(32,32,32,0.5)" valueColor="#555" />
      </view>

      <navigator class="uni-common-mb" url="./slider-in-swiper">
        <button>slider in swiper</button>
      </navigator>
      
      <navigator class="uni-common-mb" url="./slider-maxValue">
        <button>slider maxValue</button>
      </navigator>
    </view>
  </scroll-view>
</template>

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

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