⼩程序picker-view⾃定义⽇期时间等
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;
htmlborderwidth: 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 <= FullYear(); 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: FullYear(),
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: ars[val[0]],
month: hs[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'
}
anslateY(offset).step()
this.setData({
animationData: port(),
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) {
anslateY(0 + 'vh').step()
} else {
anslateY(50 + 'vh').step()
}
that.setData({
data_animationAddress: port(),
data_addressShow: isShow,
})
},
// 时间
confirm: function(e) {
var that = this
var value = that.data.value
that.start_data_AddressAnimation(false)
let birthday = `${ar}-${h}-${that.data.day}`    that.setData({
birthday: birthday
})
},
data_hide: function(e) {
console.log(e)
this.start_data_AddressAnimation(false)
},
写的特别乱！别介意

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。