微信小程序 评论input 弹出框

运用了一个组件：

https://youzan.github.io/vant-weapp/#/popup

这里面有详细的介绍和使用方法！！！

 

 

需求：点击评论，弹出评论的输入框，再次点击评论又会隐藏弹出的评论框

首先在wxml里面编写弹出层：

<van-popup custom-style='style' overlay="{{ false }}" position="bottom" show="{{ show }}">
       <view class='popup'>
        <input class='input' placeholder-class="placeholderStyle" placeholder='想说的话......'></input>
        <button class='button'>发送</button>
        </view>
      </van-popup>

 在js里面写事件：

onClose() {
    this.setData({ show: true });
  },
  // 点击下拉显示框
  selectTap() {
    this.setData({
      show: !this.data.show
    });
  },

还要在data里面定义show的初始变量：
show: false,

在你需要绑定事件的地方绑定你后面定义的事件

最后贴心的贴上wxss

.style{
  z-index:10000;
  width:100%; 
}
.popup{
  display: flex; 
  align-items: center;
  background:rgb(242, 242, 242,1);
}
.input{
  width: 65%;
  height: 60rpx; 
  display:block; 
  margin: 30rpx auto;
  background: #fff;
}
.placeholderStyle{
  font-size: 26rpx;
  margin: 0 20rpx;
}
.button{
  height: 60rpx;
  width: 20%;
  line-height:60rpx;
  text-align: center; 
  font-size: 30rpx;
  box-shadow: 8rpx;
  color:#979797;
}