uni-app picker-view picker-view-column 选择日期的一个例子

最新推荐文章于 2025-07-01 13:10:02 发布

原创

最新推荐文章于 2025-07-01 13:10:02 发布 · 727 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文通过uni-app的picker-view和picker-view-column组件，详细介绍了如何实现日期选择功能。利用这些组件，开发者可以轻松创建一个用户友好的日期选择器，适用于移动应用开发。

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

<template>
	<view class="u-p-30">
		<u-divider>{
  
  {year}}年{
  
  {month}}月{
  
  {day}}日</u-divider>

		<picker-view :indicator-style="`height:88rpx;`" :value="value" @change="change" class="picker-view">
			<picker-view-column>
				<view class="item" v-for="(item,index) in years" :key="index">{
  
  {item}}年</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in months" :key="index">{
  
  {item}}月</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item