uniapp手写滚动选择器的完整代码(时间选择器)

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

这篇文章主要介绍了uniapp手写滚动选择器的完整代码(时间选择器),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

效果展示

在这里插入图片描述

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

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 表示当前选择的小时和分钟的索引，hours 和 minutes 分别是小时和分钟的选项数组。
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;
    }
  }

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

到此这篇关于uniapp手写滚动选择器的文章就介绍到这了,更多相关uniapp滚动选择器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

javascript 模块依赖管理的本质深入详解
这篇文章主要介绍了javascript 模块依赖管理,结合实例形式深入分析了javascript 模块依赖管理具体定义、实现方法及注意事项,需要的朋友可以参考下
2020-04-04
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
这篇文章主要介绍了JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法,涉及JavaScript页面元素定时滚动操作及ajax调用实现技巧,需要的朋友可以参考下
2016-04-04
JS必备技能之数据类型判断与底层原理深入解析
在JavaScript中类型判断是指确定一个变量或值的类型的过程,这篇文章主要介绍了JS必备技能之数据类型判断与底层原理的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2025-09-09
uni-app小程序实现微信在线聊天功能(私聊/群聊)
这篇文章主要介绍了uni-app小程序实现微信在线聊天（私聊/群聊）,今天记录一下项目核心功能的实现过程。页面UI以及功能逻辑全部来源于微信，即时聊天业务的实现使用socket.io，前端使用uni-app开发，后端服务器基于node实现，数据库选择mongoDB，需要的朋友可以参考下
2023-02-02
js实时获取系统当前时间实例代码
在网页中实时的显示时间，不但可以给网页添色，还可以方便浏览者掌握当前时间，为了提高网站的开发速度，可以把主代码封装在一个单独的函数里面，在需要的时候直接调用而我为了演示，直接写在了主页面，方便大家观看
2013-06-06
JS数组的遍历方式for循环与for...in
本节主要介绍了JS数组的遍历方式for循环与for...in,需要的朋友可以参考下
2014-07-07
javascript 四十条常用技巧大全
本文给大家整理了有关js四十条常用技巧，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧
2016-09-09
JavaScript实现图形验证码完整代码
很多小伙伴都在学习JavaScript,可能也会有老师提出这样一个问题,如何用js编写一个简单的验证码,这里就和大家分享一下,这篇文章主要给大家介绍了关于JavaScript实现图形验证码的相关资料,需要的朋友可以参考下
2024-01-01
js跳转到指定url的方法与实际使用
这篇文章主要给大家介绍了关于js跳转到指定url的方法与实际使用的相关资料,要实现JavaScript跳转到指定URL,可以使用window.location对象来实现,需要的朋友可以参考下
2023-09-09
关于JS数组追加数组采用push.apply的问题
JS数组追加数组没有现成的函数，这么多年我已经习惯了a.push.apply(a, b);这种自以为很酷的，不需要写for循环的写法，一直也没遇到什么问题，直到今天我要append的b是个很大的数组时才遇到了坑。
2014-06-06