picker-view 可以自定义地区时间什么的,其实主要是可以修改样式啦。
<view class=‘login-user border-none‘ bindtap=‘data_click‘> <view class=‘user-t‘>生日</view> <view class=‘user-i‘> <input placeholder="请输入生日" disabled value=‘{{birthday}}‘ /> </view> <view class=‘header-jian‘> <image src=‘../../img/jiantou.png‘></image> </view> </view>
css自己调试
.container { display: block; background-color: #fafafa; padding: 0; } .top-menu { display: flex; position: fixed; height: 80rpx; z-index: 10; background-color: #fff; width: 100%; top: 0; left: 0; flex-direction: row; align-items: center; justify-content: space-around; border-top: 2rpx solid #ddd; border-bottom: 2rpx solid #ddd; font-size: 11pt; color: #bdbdbd; } .state-menu { display: flex; position: fixed; left: 0; height: 200rpx; top: 80rpx; width: 100%; z-index: 9; background-color: #fff; flex-direction: row; border-bottom: 2rpx solid #ddd; justify-content: space-around; align-items: center; flex-wrap: wrap; } .hidden.state-menu { transform: translateY(-200rpx); transition: all 0.4s ease; visibility: hidden; } .show.state-menu { transform: translateY(0); transition: all 0.4s ease; visibility: visible; } .dialog-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 8; background: rgba(0, 0, 0, 0.6); } .state-item { width: 20%; height: 70rpx; font-size: 11pt; line-height: 70rpx; text-align: center; border-radius: 10rpx; border: 2rpx solid #ddd; } .border.state-item { border: 2rpx solid #c4245c; } .date { min-width: 40%; display: flex; font-size: 11pt; color: #bdbdbd; align-items: center; } .date-btn { min-width: 80%; font-size: 12pt; background-color: #c4245c; color: #fff; position: fixed; } .picker-view { width: 100%; display: flex; z-index: 12; background-color: #fff; flex-direction: column; justify-content: center; align-items: center; position: fixed; bottom: 0rpx; left: 0rpx; } .picker-item { line-height: 70rpx; margin-left: 5rpx; margin-right: 5rpx; text-align: center; } .picker-h { position: relative; text-align: center; font-size: 32rpx; width: 100%; padding: 35rpx 0; border-bottom: solid 1rpx #f0f0f0; } .riqi-q { background-color: #fe5c68; font-size: 24rpx; padding: 12rpx 30rpx; color: #fff; position: absolute; right: 25rpx; border-radius: 5px; } .time-text { display: flex; text-align: center; font-size: 28rpx; width: 100%; padding: 20rpx 0; } .time-title { flex: 1; } .input{ width:200px; height:30px; border:1px solid grey; } .input:empty::before{ color:lightgrey; content:attr(placeholder); } .p_name{ display: flex; align-items: center; width:100%; text-align:center; } .p_n_i{ flex: 1; font-size: 28rpx; padding-top: 20rpx; }
var animation // 时间 const date = new Date() const years = [] const months = [] const days = [] for (let i = 1990; i <= date.getFullYear(); i++) { years.push(i) } for (let i = 1; i <= 12; i++) { var k = i; if (0 <= i && i <= 9) { k = "0" + (i); } else { k = (i); } months.push(k) } for (let i = 1; i <= 31; i++) { var k = i; if (0 <= i && i <= 9) { k = "0" + (i); } else { k = (i); } days.push(k) } Page({ data: { imageList: ‘../../img/tou.png‘, imageList2: [], fun_id: 2, animationData: {}, data_animationAddress: {}, data_addressShow: false, years: years, year: date.getFullYear(), months: months, month: 2, days: days, day: 2, value: [9999, 1, 1] }, onLoad: function() { // 初始化动画变量 var animation = wx.createAnimation({ duration: 500, transformOrigin: "50% 50%", timingFunction: ‘ease‘, }) this.animation = animation; }, bindChange: function(e) { const val = e.detail.value this.setData({ year: this.data.years[val[0]], month: this.data.months[val[1]], day: this.data.days[val[2]] }) }, // 执行动画 startAnimation: function(isShow, offset) { var that = this var offsetTem if (offset == 0) { offsetTem = offset } else { offsetTem = offset + ‘rpx‘ } this.animation.translateY(offset).step() this.setData({ animationData: this.animation.export(), isVisible: isShow }) console.log(that.data) }, // 时间 data_click: function(e) { console.log(‘2222‘) var that = this if (that.data.data_addressShow) { return } that.start_data_AddressAnimation(true) }, // 执行动画 start_data_AddressAnimation: function(isShow) { var that = this if (isShow) { that.animation.translateY(0 + ‘vh‘).step() } else { that.animation.translateY(50 + ‘vh‘).step() } that.setData({ data_animationAddress: that.animation.export(), data_addressShow: isShow, }) }, // 时间 confirm: function(e) { var that = this var value = that.data.value that.start_data_AddressAnimation(false) let birthday = `${that.data.year}-${that.data.month}-${that.data.day}` that.setData({ birthday: birthday }) }, data_hide: function(e) { console.log(e) this.start_data_AddressAnimation(false) },
写的特别乱!别介意