微信小程序 实现从顶部弹出的下拉框

效果图：

我尝试了微信提供的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
    })
  }

 最近开了个公众号用于推送前端学习总结，有更多有趣有用的文章在这里推送，请多多关注 。