在小程序开发中,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值试试