小程序自定义滚动时间选择器

花贝是只猫

已于 2022-06-01 10:56:19 修改

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：小程序前端 javascript

于 2021-05-08 19:53:34 首次发布

本文链接：https://blog.youkuaiyun.com/YanH_an/article/details/116540933

这篇博客分享了一位开发者如何在微信小程序中创建一个自定义的时间选择器组件，以替代原生的picker。文章包括了WXML、JS和CSS代码示例，展示了一个具有年、月、日选择功能的个性化时间选择器，并提供了完整实现和Gitee源码链接。该组件允许用户自定义样式，并可以根据实际需求调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

借鉴了这位大神的代码大家去看！
picker-view、微信小程序自定义时间选择器（非官方）

众所周知，小程序原生的pick过于统一化，看起不咋好看~
个性化的时间选择器网上又比较少，so~趁着今天写的项目用到了
写了一个简单的例子，自认为还能看，觉得不好看的亲可以自己再改改呀

图片.gif

在这里插入图片描述
看起来系不系还可以呀~
代码在下方自取呀~
最后有gitee地址！！

wxml

<view class="new-date-pick-bg"  wx:if="{
    
    {propDate}}" bindtap="closePick"></view>
<view class="new-date-pick">
    <view class="new-date-pick-input" bindtap="openPick">
      <view>{
  
  {timeInput == '' ? '选择时间' : timeInput}}</view>
      <icon catchtap="clearPick" class="new-date-pick-input-icon" type="cancel" size="23" color="#549EFD"></icon>
    </view>
    <view class="new-date-pick-body" wx:if="{
    
    {propDate}}">
      <view class="new-date-pick-main">
        <picker-view indicator-class='new-date-pick-col' indicator-style="height: 56rpx;" style="width: 100%; height: 276rpx;" value="{
    
    {value}}" bindchange="bindChange">
          <picker-view-column>
            <view wx:for="{
    
    {years}}" class="{
    
    { year === item ? 'new-date-pick-col-text' : '' }}" wx:key="years" style