uniapp手写滚动选择器

简介: 【8月更文挑战第6天】

没有符合项目要求的选择器 就手写了一个

效果展示

image.png

实现一个时间选择器的功能,可以选择小时和分钟:

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> 是一个小程序中的组件,用于实现滚动选择器效果。
  • :indicator-style:value 是组件的属性绑定,分别用来设置选择器的样式和当前选择的值。
  • @change 是一个事件监听器,当选择器的值发生改变时会触发 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")),  // 生成小时选项数组
    minutes: [...Array(60).keys()].map((n) => n.toString().padStart(2, "0")),  // 生成分钟选项数组
  };
},
methods: {
   
   
  handleTimeChange(e) {
   
   
    this.timeValue = e.detail.value;  // 更新选择的时间值
    // 处理选择后的逻辑,例如更新界面显示的时间
    console.log(
      "Selected Time:",
      this.hours[this.timeValue[0]],
      ":",
      this.minutes[this.timeValue[1]]
    );
  },
}
  • data() 中定义了组件的数据状态,包括 timeValue 表示当前选择的小时和分钟的索引,hoursminutes 分别是小时和分钟的选项数组。
  • handleTimeChange(e) 方法是一个事件处理器,用来响应选择器数值改变事件。它更新 timeValue 并可以执行相应的逻辑,例如打印或更新界面上显示的选择结果。

CSS部分:

.sleepPage-time-picker-box {
   
   
  display: flex;
  margin-bottom: 10px;
}
.sleepPage-time-picker {
   
   
  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;
}
  • 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;
    }
  }

您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

目录
相关文章
|
6月前
|
Web App开发 小程序 Android开发
uniapp TC-scroll-view 横向和纵向滚动 带滚动回调
uniapp TC-scroll-view 横向和纵向滚动 带滚动回调
102 0
|
6月前
|
小程序 API 索引
uniapp中uview组件库中丰富的Picker 选择器用法
uniapp中uview组件库中丰富的Picker 选择器用法
1172 0
|
12月前
|
JSON 小程序 开发工具
uniapp获取接口数据,渲染在picker选择器里面
uniapp获取接口数据,渲染在picker选择器里面
130 0
|
7天前
|
数据可视化 前端开发 UED
低代码可视化-Uniapp Cascader级联选择器-代码生成器
Cascader级联选择器是一种常用的UI组件,适用于从具有层级关系的数据中进行选择,如省市区选择、公司层级选择等。它通过分组多列展示选项,支持多级分类、联动选择、搜索与过滤等功能。组件具备自定义样式、禁用选项、清空选项等特性,广泛应用于电商、企业内部系统等场景。代码示例展示了其详细的实现和调用方法。
21 7
低代码可视化-Uniapp Cascader级联选择器-代码生成器
|
25天前
|
移动开发 JavaScript 前端开发
UniApp低代码-颜色选择器diy-color-picker-代码生成器
UniApp低代码-颜色选择器diy-color-picker-代码生成器
56 5
|
4月前
uniapp实战 —— 猜你喜欢(含滚动触底分页加载)
uniapp实战 —— 猜你喜欢(含滚动触底分页加载)
60 3
|
4月前
uniapp实战 —— 可滚动区域 scroll-view (自适配高度,下拉刷新)
uniapp实战 —— 可滚动区域 scroll-view (自适配高度,下拉刷新)
1037 0
|
6月前
|
移动开发 小程序 API
uniapp中uview组件库丰富的CountTo 数字滚动使用方法
uniapp中uview组件库丰富的CountTo 数字滚动使用方法
76 2
|
6月前
|
移动开发 小程序 API
uniapp中uview组件库的NoticeBar 滚动通知 使用方法
uniapp中uview组件库的NoticeBar 滚动通知 使用方法
260 1
|
6月前
|
移动开发 小程序 JavaScript
uniapp中uview组件库丰富的Slider 滑动选择器的使用方法
uniapp中uview组件库丰富的Slider 滑动选择器的使用方法
655 1