首页 > 编程知识 正文

手机时间小程序怎么设置,微信小程序picker置顶

时间:2023-05-03 07:37:50 阅读:174740 作者:2370

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自己jsdgk

.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) },

写的特别乱!别介意

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。