微信小程序如何实现点击触发弹出窗口功能？

本文共计721个文字，预计阅读时间需要3分钟。

本例为家庭分享了一个微信小程序实现点击出现弹窗的整体代码，供大家参考。内容如下：

1. 现在在page文件中定义一个dh的文件，然后在component定义一个可复用的组件dislog。

javascript// page/dh.jsPage({ data: { // ... }, // ...});

// component/dislog/dislog.jsComponent({ properties: { // ... }, methods: { // ... }});

2. 在dislog组件的wxml中添加弹窗内容。

弹窗内容

3. 在dislog组件的wxss中添加样式。

css/* component/dislog/dislog.wxss */.dislog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);}

.dislog-content { padding: 20px;}

4. 在page文件中使用dislog组件。

5. 在page文件的js中处理点击事件，并显示dislog组件。

javascript// page/page.jsPage({ data: { // ... }, showDislog: function() { var dislog=this.selectComponent(#dislog); dislog.setData({ // 设置弹窗数据 }); dislog.show(); // 显示弹窗 }});

本文实例为大家分享了微信小程序实现点击出现弹窗的具体代码，供大家参考，具体内容如下

1.现在page文件里面定义一个dh的文件，然后在component定义一个可复用的组件为dislog

然后在dh的json文件中引入这个组件

{   "usingComponents": {     "dialog":"../../component/dialog/index"             }     }

2.dh中.js文件

// pages/dh/index.js Page({   data: {     status:false   },   handleTap(){     this.setData({       status:true     })   },   handlecancel(){     this.setData({       status:false     })   },   handleConfirm(){     this.setData({       status:false     })   } })

.wxml文件中

<dialog title="警告" status="{{status}}" bind:cancel='handlecancel' bind:confirm="handleConfirm" content='啦啦啦我也不知道这什么哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈'>   <image src='//gw.alicdn.com/imgextra/i1/O1CN016q4k5T1IPNCZM2RTx_!!6000000000885-0-tps-640-260.jpg_Q75.jpg'></image> </dialog> <view bindtap='handleTap' class='show'>显示</view>

.wxss文件

/* pages/dh/index.wxss */ .show{   /* width:100%;   height:100vh; */   width:200rpx;   height:140rpx;   background:#ccc;   border-radius:20rpx;   color:#fff;   text-align:center;   line-height:140rpx;   font-size:40rpx;   margin:0 auto;   margin-top:470rpx; }

在组件中dialog文件中
index.js文件

// component/dialog/index.js Component({   /**    * 组件的属性列表    */   properties: {     title:{       type:String,       value:"标题"     },     content:String,     status:{       type:Boolean,       value:false,     }   },   /**    * 组件的初始数据    */   data: {   },   /**    * 组件的方法列表    */   methods: {     handleCancel(){       this.triggerEvent("cancel")     },     handleConfirm(){       // this.triggerEvent('confirm')         this.triggerEvent('confirm')     }   } })

wxml文件

<view class="mask" wx:if="{{status}}">   <view class="dialog">     <view class="dialog-header">         {{title}}     </view>     <view class="dialog-body">       <view wx:if="{{content}}" class='content'>{{content}}</view>       <slot></slot>     </view>     <view class="dialog-footer">       <view class="dialog-btn" bindtap='handleCancel'>取消</view>       <view class="dialog-btn" bindtap='handleConfirm'>确认</view>     </view>   </view> </view>

wxss文件

.mask{   position:fixed;   top:0;   left:0;   right:0;   bottom:0;   background-color:rgb(0,0,0,0.3);   display:flex;   align-items: center;   justify-content:center; } .dialog{   width:600rpx;   height:auto;   background:#fff;   border-radius:30rpx; } .dialog-header{   padding:30rpx 0;   text-align:center;   font-size:36rpx; } .dialog-footer{   display:flex; } .dialog-btn{   flex:1;   text-align:center;   padding:40rpx 0;   border-top:1rpx solid #eee; } .dialog-btn:first-child{   border-right:1rpx solid #eee; } .dialog-body{   padding:30rpx; } .content {   text-indent: 72rpx;   color:#333; } .dialog-body image{   width:100%; }

这样就可以实现一个简单的点击出现弹窗的效果。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。