|
效果图： 
我尝试了微信提供的API wx.animation去实现这个功能，但很是麻烦，而且对于我这刚接触小程序的渣渣而言，实现起来也很是困难。所以我换了种方法，采用CSS的动画去实现。 wxml: <image class='fabiao' src='../icon/fabiao2.png' bindtap='fabiao'></image>
<!--触发下拉框的组件，我这里是一个发表图标-->
<view class='zhezhao' hidden="{{flag}}">
<!--这是一个遮罩层，在框弹出后遮住框外区域-->
</view>
<!--这是下拉框中的内容，一个文本框和一个按钮，按钮触发拉起事件，表示拉起下拉框-->
<view class="test3 {{test=='test1'?'test1':'test2'}}" style='display:{{yesorno}};'>
<view class='input-content'>
<textarea class='ta' placeholder="元芳，有何要说的么？" auto-focus />
</view>
<button class='btn' bindtap='laqi'>发表</button>
</view>
WXSS： .zhezhao {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
background: rgba(0, 0, 0, 0.4);
overflow: hidden;
}
@keyframes myfirst {
from {
transform: translateY(-860rpx);
}
to {
transform: translateY(0rpx);
}
}
@keyframes mylast {
from {
transform: translateY(0rpx);
}
to {
transform: translateY(-900rpx);
}
}
.test2 {
animation: mylast;
animation-duration: 1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
width: 750rpx;
height: 860rpx;
border: 2rpx solid #ededed;
position: absolute;
top: 0;
left: 0;
z-index: 1454;
background-color: #fff;
}
.test1 {
animation: myfirst;
animation-duration: 0.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
width: 750rpx;
height: 860rpx;
border: 2rpx solid #ededed;
position: absolute;
top: 0;
left: 0;
z-index: 1454;
background-color: #fff;
}
.btn {
width: 700rpx;
height: 100rpx;
position: absolute;
bottom: 0;
left: 0;
margin: 10rpx;
margin-left: 25rpx;
}
.test3{
display: flex;
flex-direction: column;
background-color: #ededed;
}
.input-content{
width: 100%;
height: 400rpx;
border:2rpx solid #ededed;
margin-left: auto;
margin-right: auto;
margin-bottom: 40rpx;
background-color: #fff;
}
.ta{
width: 650rpx;
height: 250rpx;
margin-bottom: 20rpx;
margin-top: 110rpx;
/* border: 8rpx solid red; */
margin-left: auto;
margin-right: auto;
}
JS： data{
animate: 'myfirst',
yesorno: 'none',
flag: true,
test:'test1'
}
fabiao: function () {
this.setData({
yesorno: 'block'
})
this.setData({
test: 'test1'
})
this.setData({
flag: false
})
},
laqi: function () {
this.setData({
test: 'test2',
})
this.setData({
flag: true
})
}
| 
转播
