1. 程式人生 > >微信小程序picker-view自定義日期時間等

微信小程序picker-view自定義日期時間等

tap ddr .sh tex ase off fir span tran

技術分享圖片

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

寫的特別亂!別介意

微信小程序picker-view自定義日期時間等