简单写了一个选择月日的微信小程序picker弹窗组件

故土新人

于 2021-11-30 17:47:53 发布

阅读量1.2k

点赞数 1

分类专栏：自己写的组件文章标签：微信小程序

本文链接：https://blog.csdn.net/qq_40942817/article/details/121637984

版权

本文介绍如何在微信小程序中创建一个选择月日的picker组件，以满足只选择月份和日期的需求。作者分享了实现这个组件的WXML、WXSS和JS代码，并表达了在前端开发中不断学习进步的决心。

摘要由CSDN通过智能技术生成

起因：

微信自带的picker选择器，只有xx年xx月xx日，xx年xx月和xx年，没有xx月xx日的样式。而自己有开发需求，需要用户选择自己的生日，无关年份的，就尝试自己写了一个，代码如下

微信原生代码：

wxml：

	<!-- 月：日选择器 -->
	<view class="date-picker {
    {isShow?'date-picker-show':''}}">
		<view class="data-picker-mask" bindtap="close"></view>
		<view class="picker-box {
    {isShow?'picker-box-show':''}}">
			<view class="check-box">
				<view class="cancel-btn" bindtap="close">取消</view>
				<view class="confirm-btn" bindtap="confirmPop">确定</view>
			</view>
			<picker-view class="date-picker-view" value="{
    {value}}" indicator-style="height: 			    50px;" bindchange="dateChange">
				<picker-view-column>
					 <view class="date-item" wx:for="{
    {month}}" wx:key="index">{
  {item}}月</view>
				</picker-view-column>
				<picker-view-column>
					 <view class="date-item