uniapp手寫滾動選擇器的完整代碼(時間選擇器)

更新時間：2024年07月31日 09:54:52 作者：奶糖肥晨

這篇文章主要介紹了uniapp手寫滾動選擇器的完整代碼(時間選擇器),本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

效果展示

在這里插入圖片描述

實現(xiàn)一個時間選擇器的功能，可以選擇小時和分鐘：

HTML/Template部分：

<picker-view
  class="sleepPage-time-picker"
  :indicator-style="indicatorStyle"
  :value="timeValue"
  @change="handleTimeChange"
>
  <!-- 第一列：小時選擇 -->
  <picker-view-column>
    <view
      v-for="(hour, index) in hours"
      :key="index"
      :class="[
        'sleepPage-time-picker_item',
        { selected: timeValue[0] === index },
      ]"
    >
      {{ hour }}
      <span
        class="sleepPage-time-picker_item-span"
        v-if="timeValue[0] === index"
        >時</span
      >
    </view>
  </picker-view-column>
  <!-- 第二列：分鐘選擇 -->
  <picker-view-column>
    <view
      v-for="(minute, index) in minutes"
      :key="index"
      :class="[
        'sleepPage-time-picker_item',
        { selected: timeValue[1] === index },
      ]"
    >
      {{ minute }}
      <span
        class="sleepPage-time-picker_item-span"
        v-if="timeValue[1] === index"
        >分</span
      >
    </view>
  </picker-view-column>
</picker-view>

<picker-view> 是一個小程序中的組件，用于實現(xiàn)滾動選擇器效果。
:indicator-style 和 :value 是組件的屬性綁定，分別用來設(shè)置選擇器的樣式和當前選擇的值。
@change 是一個事件監(jiān)聽器，當選擇器的值發(fā)生改變時會觸發(fā) handleTimeChange 方法。

JavaScript部分：

data() {
  return {
    timeValue: [0, 0],  // 默認選中的時間值，[小時索引, 分鐘索引]
    indicatorStyle: "height: 30px;background: rgba(237, 252, 249, 1);z-index: 0;",
    hours: [...Array(24).keys()].map((n) => n.toString().padStart(2, "0")),  // 生成小時選項數(shù)組
    minutes: [...Array(60).keys()].map((n) => n.toString().padStart(2, "0")),  // 生成分鐘選項數(shù)組
  };
},
methods: {
  handleTimeChange(e) {
    this.timeValue = e.detail.value;  // 更新選擇的時間值
    // 處理選擇后的邏輯，例如更新界面顯示的時間
    console.log(
      "Selected Time:",
      this.hours[this.timeValue[0]],
      ":",
      this.minutes[this.timeValue[1]]
    );
  },
}

data() 中定義了組件的數(shù)據(jù)狀態(tài)，包括 timeValue 表示當前選擇的小時和分鐘的索引，hours 和 minutes 分別是小時和分鐘的選項數(shù)組。
handleTimeChange(e) 方法是一個事件處理器，用來響應(yīng)選擇器數(shù)值改變事件。它更新 timeValue 并可以執(zhí)行相應(yīng)的邏輯，例如打印或更新界面上顯示的選擇結(jié)果。

CSS部分：

.sleepPage-time-picker-box {
  display: flex;
  margin-bottom: 10px;
}
.sleepPage-time-picker {
  height: 90px;  /* 設(shè)置選擇器的高度 */
  width: 50%;  /* 設(shè)置選擇器的寬度 */
  margin: 2px;
}
.selected {
  color: rgba(40, 184, 129, 1);  /* 設(shè)置選中項的文字顏色 */
}
.sleepPage-time-picker_item {
  text-align: center;
  height: 30px;
  line-height: 30px;
  position: relative;
}
.sleepPage-time-picker_item-span {
  padding-left: 10px;
  position: absolute;
  right: 15px;
}

CSS 部分定義了選擇器和其子元素的樣式，包括選擇器的整體布局和每個選項的樣式，以及選中項的特殊樣式。

完整代碼

     <picker-view
          class="sleepPage-time-picker"
          :indicator-style="indicatorStyle"
          :value="timeValue"
          @change="handleTimeChange"
        >
          <picker-view-column>
            <view
              v-for="(hour, index) in hours"
              :key="index"
              :class="[
                'sleepPage-time-picker_item',
                { selected: timeValue[0] === index },
              ]"
            >
              {{ hour }}
              <span
                class="sleepPage-time-picker_item-span"
                v-if="timeValue[0] === index"
                >時</span
              >
            </view>
          </picker-view-column>
          <picker-view-column>
            <view
              v-for="(minute, index) in minutes"
              :key="index"
              :class="[
                'sleepPage-time-picker_item',
                { selected: timeValue[1] === index },
              ]"
            >
              {{ minute }}
              <span
                class="sleepPage-time-picker_item-span"
                v-if="timeValue[1] === index"
                >分</span
              >
            </view>
          </picker-view-column>
        </picker-view>
      timeValue: [0, 0],
      indicatorStyle:
        "height: 30px;background: rgba(237, 252, 249, 1);z-index: 0;",
      hours: [...Array(24).keys()].map((n) => n.toString().padStart(2, "0")),
      minutes: [...Array(60).keys()].map((n) => n.toString().padStart(2, "0")),
    handleTimeChange(e) {
      this.timeValue = e.detail.value;
      // 這里可以處理時間選擇后的邏輯，例如更新界面顯示的時間
      console.log(
        "Selected Time:",
        this.hours[this.timeValue[0]],
        ":",
        this.minutes[this.timeValue[1]]
      );
    },
  .sleepPage-time-picker-box {
    display: flex;
	margin-bottom: 10px;
    .sleepPage-time-picker {
      // height: 300px;
      height: 90px;
      width: 50%;
      margin: 2px;
    }
    .selected {
      color: rgba(40, 184, 129, 1);
    }
    .sleepPage-time-picker_item {
      text-align: center;
      height: 30px;
      line-height: 30px;
      position: relative;
    }
    .sleepPage-time-picker_item-span {
      padding-left: 10px;
      position: absolute;
      right: 15px;
    }
  }