小程序 使用动画将picker-view模拟类似picker的效果

在小程序开发中，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