uni-app rangdar

在uni-app中使用range通常指的是在组件或API中设置范围值，比如滑动选择器（<slider>）、选择器（<picker>）等组件中的range属性。range属性定义了这些组件的可选范围。下面是如何在uni-app中使用range属性的一些代码示例。

示例1：使用<slider>组件

<template>
  <view>
    <slider :value="value" :min="0" :max="100" :range="[0, 100]" @change="onSliderChange"></slider>
    <text>当前值: {{value}}</text>
  </view>
</template>

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

<style>
/* 添加一些基本样式 */
slider {
  width: 80%;
  margin: 20px auto;
}
</style>

示例2：使用<picker>组件

<template>
  <view>
    <picker mode="selector" :range="array" :value="index" @change="onPickerChange">
      <view class="picker">
        {{array[index]}}
      </view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      array: ['选项1', '选项2', '选项3'],
      index: 0
    };
  },
  methods: {
    onPickerChange(e) {
      this.index = e.detail.value;
    }
  }
};
</script>

<style>
.picker {
  padding: 20px;
  text-align: center;
  background-color: #f8f8f8;
  border: 1px solid #ddd;
}
</style>

解释

1. <slider>组件：

   • value：当前值。
   • min和max：设置滑动条的最小值和最大值。
   • range：定义了滑动条的范围，虽然在这个例子中range和min、max是重复的，但你可以根据需求自定义范围。
   • @change：当滑动条的值改变时触发的事件。

2. <picker>组件：

   • mode：选择器模式，这里使用的是selector模式。
   • range：定义了选择器的选项数组。
   • value：当前选中项的索引。
   • @change：当选中的值改变时触发的事件。

这两个示例展示了如何在uni-app中使用range属性来设置组件的范围值，并处理用户交互。