微信小程序picker-view自定义日期时间等

Posted 2020-12-03 Brian

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

写的特别乱！别介意