弹框-小程序开发技巧分享（二）

本文为作者实际项目遇到的问题总结，在这里记录分享。喜欢的加个收藏吧。

评论弹窗（手机会弹出软键盘）

 wxml部分

    <!--用户点击评论按钮   弹出评论框 -->
    <scroll-view scroll-y="{{isScroll}}">
    <!-- 评论框 -->
    <view class='model' wx:if="{{inputBoxShow}}">
     <!-- invisible_model view 用于点击隐藏model评论框 -->
     <view class='invisible_model' catchtap='invisible'></view>
     <view class='input-box'>
         <textarea class="textarea" placeholder="请输入你的评论 ~" cursor-spacing="{{65}}" 
         show-confirm-bar="{{false}}" adjust-position="{{true}}" auto-focus="{{true}}" value="{{commentcontent}}"  bindinput="saveinput" />
         <text class='send' bindtap="addComment" >发送</text>
         </view>
         </view>
     </scroll-view>

  data:{
       inputBoxShow: false,//展开评论框
       isScroll: true, //卷起来
   }

  //评论框控制 弹出
  showInputBox: function (e) {

  //do something
  this.setData({ inputBoxShow: true });
  this.setData({ isScroll: false });
  },

//评论框控制
 invisible: function(){
  console.log("用户点击了invisible")
  this.setData({ inputBoxShow: false });
  this.setData({ isScroll: true });

  //do something
  
  },

.model {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  }
  
  .input-box {
  position: absolute;
  background-color: #f8f8f8;
  padding: 30rpx;
  padding-bottom: 130rpx;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 101;
  }
  
  .textarea {
  background-color: #fff;
  width: 100%;
  padding: 5rpx;
  height: 3.3em;
  font-size: 15px;
  position: static;
  }
  
  .send {
  font-size: 14px;
  margin-top: 10rpx;
  color: #09bb07;
  float: right;
  position: static;
  }
  
  .invisible_model{
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  bottom: 0;
  }

底部弹框：

 wxml:

<!--需在某处 bindtap = "popup"-->  
<bottomFrame id="bottomFrame" >
        <view class='ctext' >点赞</view>
        <view class='ctext' >回复</view>
        <view class='ctext'>投诉</view>
        <view class='ctext' bindtap="popdown">取消</view>
    </bottomFrame>

 //弹出底部框 
popup(e){
  this.selectComponent('#bottomFrame').showFrame();
},
popdown(){
  this.selectComponent('#bottomFrame').hideFrame();
},

.ctext{
  width: 100%;
  text-align: center;
  height: 100rpx;
  line-height: 100rpx;
}