emmmmmmm,这是我的第一个发的博客。希望对大家有点帮助。
这是用的小程序自带的动画事件来是我们的弹出框显示和
var animation;
Page({
/**
* 页面的初始数据
*/
data: {
animationData: {}
},
tanchu:function(){
animation = wx.createAnimation({
duration: 1000,
timingFunction: 'ease',
})
this.animation = animation
animation.translate(0,-153).step();
this.setData({
animationData: animation.export()
})
},
hideModal:function(){
animation.translate(0, 0).step();
this.setData({
animationData: animation.export()
})
},
})
这部分是页面的，也没什么好说的了。
<button bindtap='tanchu'>点击</button>
<view class='kuai' animation="{{animationData}}">
<view class='les'>操作1</view>
<view class='les'>操作2</view>
<view class='les' bindtap='hideModal'>取消</view>
</view>
这是css其实没什么要写的。只要根据自己需求写样式，一开始先使用偏移将菜单栏移除试图区域。
.kuai{
width: 100%;
height: 300rpx;
background-color: #888888;
margin-bottom: -153px;
position: fixed;
bottom: 0;
}
.les{
color: white;
text-align: center;
height: 100rpx;
width: 100%;
line-height: 100rpx;
border-bottom:1rpx solid black;
}
样式丑是丑了点，毕竟只是练下手QAQ。
支持一下嘻嘻
