在小程式開發中，picker在許多地方會用到，但是可能不會滿足產品的要求，此時可以使用picker-view進行處理

js檔案中使用createAnimation建立動畫來做過度效果，當然也可以在css中加入動畫，不過我就要用js  -。-

// pages/myTimeSelect/myTimeSelect.js
const date = new Date()
const years = []
const months = []
const days = []
var self

for (let i = 1990; i <= date.getFullYear(); i++) {
  years.push(i)
}

for (let i = 1; i <= 12; i++) {
  months.push(i)
}

for (let i = 1; i <= 31; i++) {
  days.push(i)
}
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    years: years,
    year: date.getFullYear(),
    months: months,
    month: 2,
    days: days,
    day: 2,
    value: [9999, 1, 1],
    myTimeChoose: false,
    myTimeChooseViewAnimationData: {},
    myTimePickerViewMaskViewAnimationData: {},
    pickerViewHeight: 300,
    pickerViewTime: 300,
  },
  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]]
    })
  },
  chooseSezi: function (e) {
    // 建立一個動畫例項
    var myTimeChooseViewAnimation = wx.createAnimation({
      // 動畫持續時間
      duration: self.data.pickerViewTime,
      // 定義動畫效果，當前是勻速
      timingFunction: 'ease'
    })
    // 先在y軸偏移，然後用step()完成一個動畫，先向下動畫pickerView個高度
    myTimeChooseViewAnimation.translateY(self.data.pickerViewHeight).step()

    var myTimePickerViewMaskViewAnimation = wx.createAnimation({
      duration: self.data.pickerViewTime,
      timingFunction: 'ease'
    })
    myTimePickerViewMaskViewAnimation.opacity(0).step()


    // 用setData改變當前動畫
    self.setData({
      // 通過export()方法匯出資料
      myTimeChooseViewAnimationData: myTimeChooseViewAnimation.export(),
      myTimePickerViewMaskViewAnimationData: myTimePickerViewMaskViewAnimation.export(),
      // 改變view裡面的Wx：if
      myTimeChoose: true
    })
    // 再還原到之前位置
    myTimeChooseViewAnimation.translateY(0.2).step()
    myTimePickerViewMaskViewAnimation.opacity(1).step()
    self.setData({
      myTimeChooseViewAnimationData: myTimeChooseViewAnimation.export(),
      myTimePickerViewMaskViewAnimationData: myTimePickerViewMaskViewAnimation.export()
    })
  },
  myTimePickerViewMaskViewTap: function (e) {
    var myTimePickerViewMaskViewAnimation = wx.createAnimation({
      duration: self.data.pickerViewTime,
      timingFunction: 'ease'
    })
    myTimePickerViewMaskViewAnimation.opacity(-0.8).step()

    var myTimeChooseViewAnimation = wx.createAnimation({
      duration: self.data.pickerViewTime,
      timingFunction: 'ease'
    })
    myTimeChooseViewAnimation.translateY(0).step()
    self.setData({
      myTimeChooseViewAnimationData: myTimeChooseViewAnimation.export(),
      myTimePickerViewMaskViewAnimationData: myTimePickerViewMaskViewAnimation.export(),
      myTimeChoose: false
    })
  },
  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    self = this;
  },
})
 

wxss檔案

<!--pages/myTimeSelect/myTimeSelect.wxml-->
<view class='text' bindtap='chooseSezi'>請選擇時間</view>

<view class='myTimePickerViewMaskView' wx:if="{{myTimeChoose}}" bindtap='myTimePickerViewMaskViewTap' animation='{{myTimePickerViewMaskViewAnimationData}}'></view>
<view class='myTimeChooseView' wx:if="{{myTimeChoose}}" animation='{{myTimeChooseViewAnimationData}}' style='height: {{pickerViewHeight}};'>
  <view>{{year}}年{{month}}月{{day}}日</view>
  <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
    <picker-view-column>
      <view wx:for="{{years}}" wx:key='year' style="line-height: 50px" class='intro'>{{item}}年</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{months}}" wx:key='month' style="line-height: 50px" class='intro'>{{item}}月</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{days}}" wx:key='day' style="line-height: 50px" class='intro'>{{item}}日</view>
    </picker-view-column>
  </picker-view>
</view>
 

css

.intro {
  text-align: center;
}

.myTimePickerViewMaskView {
  position: absolute;
  top: 0;  
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.myTimeChooseView {
  position: absolute;
  width: 100%;
  bottom: 0;
  background-color: #fff;
}

本文為小程式的一個簡單頁面，可以簡單瞭解js動畫的實現 QAQ

另外小程式在啟動時報錯 appLaunch with an already exist webviewId 加上個數字，可能是因為在首頁中有picker未設定預設值導致的，有此問題的小夥伴可以嘗試新增value值試試