微信小程序之如何弹出模态框、弹出框，弹出层

摘要

很多微信小程序都有通过长时间触摸来弹出一个新的模态框，进而进行修改、删除等按钮操作

很多微信小程序都有通过长时间触摸来弹出一个新的模态框，进而进行修改、删除等按钮操作，本文就来讲述如何通过微信小程序的 bindlongtap 事件来触发弹出层，并显示一个遮罩弹出层，进而提示用户删除或者修改。

通常来说，HTML页面中一般通过Document.getElementById来获取一个组件，然后通过改变该组件的class样式或者通过dispaly属性控制组件的显示和隐藏；但是这个方法在微信小程序中并不可用，微信小程序对组件的显示和隐藏进行了封装，它通过

<view id="model_wxapp" class="wxapp-modal" style="{{modal_style}}" wx:if="{{dispalyModel}}">
</v

来控制组件的显示和隐藏，如上述代码，如果dispalyModel的值为true，则该组件显示，否则该组件隐藏.

通过上述分析，我们只需要空过Js控制dispalyModel的值即可进而控制组件的显示和隐藏。

直接上代码：

WXML代码：

<!--模态框-->
<view id="model_wxapp" class="wxapp-modal dis_model" style="{{modal_style}}" wx:if="{{dispalyModel}}">
     <view class="content">
        
     </view>
    <view class="mask" bindtap="closeModal"></view>
   </view>
</view>

WXSS代码：

/*模态框*/

.wxapp-modal {
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
	z-index:999
}

.wxapp-modal .content {
	width:100%;
	bottom:10px;
	text-align:center;
	position:absolute
}
.wxapp-modal .content .header {
	margin:auto;
	width:93%;
	height:60px;
	line-height:60px;
	text-align:center;
	background-color:#FFFFFF;
	position:relative;
	z-index:9999;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
	border-bottom:1px #eee solid
}
.wxapp-modal .content .body {
	margin:auto;
	width:93%;
	background-color:#FFFFFF;
	position:relative;
	z-index:9999;
	border-bottom-left-radius:8px;
	border-bottom-right-radius:8px;
	overflow:hidden
}
.wxapp-modal .content .footer {
	margin:auto;
	width:93%;
	height:60px;
	line-height:60px;
	background-color:#FFFFFF;
	position:relative;
	z-index:9999;
	border-radius:8px;
	margin-top:10px;
	text-align:center
}
.wxapp-modal .content .footer button {
	display:inline-block;
	width:49%;
	height:60px;
	line-height:60px;
	background-color:#FFFFFF;
	margin-left:0px
}
.wxapp-modal .content .footer button:active {
	background-color:#eee
}
.wxapp-modal .content .footer button::after {
	content:none
}
.wxapp-modal .content .footer .cancel {
	color:#fa5b43;
	border-right:1px #eee solid;
	border-top-right-radius:0px;
	border-bottom-right-radius:0px;
	border-top-left-radius:8px;
	border-bottom-left-radius:8px
}
.wxapp-modal .content .footer .confirm {
	color:#1ed3fa;
	border-top-left-radius:0px;
	border-bottom-left-radius:0px;
	border-top-right-radius:8px;
	border-bottom-right-radius:8px
}
.wxapp-modal .mask {
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	background-color:rgba(0,0,0,0.5)
}

js代码：

首先我们在Onload中将dispalyModel初始化为false:

onLoad: function (res) {
    var that = this    
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
       
        dispalyModel:false
      })
    })

然后我们给一个view组件绑定一个长时触摸触发的事件mylongtap:

  <view class="tr bg-g"   data-id="{{item.id}}"  bindlongtap="mylongtap">
      ......
  </view>

mylongtap方法如下：

  mylongtap: function (event) {
       // var id = event.cu.dataset.id;
          console.log("event"+event);
          var id=  event.currentTarget.dataset.id;
          console.log("似的发射点发生"+id);
          var that = this 
          that.setData({
            dispalyModel:true
          })
    }

通过上述代码，即可控制一个微信小程序弹出层的显示和隐藏

 收藏 ( 0 )  赞 ( 0 )