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

1.建立组件文件夹

2.编写组件内容

 <!--index.wxml--> <view class="container">   <text>demo 01 heihzi</text>   <view bindtap="onDialog">点击 打开弹窗</view> </view> <dialog id="dialog" title="查看详情">   <scroll-view class="p-b min-ht" scroll-y style="height: 700rpx;">     <view class="dia-warp">       <text>详情信息</text>       <view wx:for="{{20}}" wx:key="index">{{item}}</view>     </view>   </scroll-view> </dialog> // components/dialong/index.js Component({   /**    * 组件的属性列表    */   properties: {     title: {       type: String     }   },   /**    * 组件的初始数据    */   data: {     show: false,     zIndex: 0,     ablClickMask: true,     hasClsBtn: false,     title: ''   },   /**    * 组件的方法列表    */   methods: {     open(params, cb, fb) {       params = params || {}       this.setData({         show: true,         zIndex: params.zIndex || 0       })       this.data._cb = cb       this.data._fb = fb     },     close() {       this.setData({         show: false       })     },     onMaskHide() {       if (this.data.ablClickMask) {         this.close()         this.triggerEvent('maskEvt')       }     }   } })

样式一定要加 不然组件弹窗出不来

/* components/dialong/index.wxss */ /* 弹窗 */ .pop {   width: 80%;   background: #fff;   border-radius: 12rpx;   height: auto;   max-height: 70vh;   margin: auto;   position: absolute;   position: fixed;   left: 0;   right: 0;   top: 20vh;   opacity: 0;   overflow: hidden;   transform: scale(0.5, 0.5);   -webkit-transform: scale(0.5, 0.5);   transition: all 0.2s ease;   -webkit-transition: all 0.2s ease; } .pop-enter {   opacity: 1;   transform: scale(1, 1);   -webkit-transform: scale(1, 1);   z-index: 1000; } .mask {   width: 100vw;   height: 100vh;   box-sizing: border-box;   background: rgba(0, 0, 0, 0.6);   position: fixed;   top: 0;   bottom: 0;   left: 0;   right: 0;   z-index: 700; } .title {   text-align: center;   padding: 20rpx 0;   border-bottom: 1rpx solid #CCC; }

组件的引入 index .json

 "usingComponents" : {     "dialog" : "/components/dialong/index"   },

3.页面中使用

<!--index.wxml--> <view class="container">   <text>demo 01 heihzi</text>   <view bindtap="onDialog">点击 打开弹窗</view> </view> <dialog id="dialog" title="查看详情">   <scroll-view class="p-b min-ht" scroll-y style="height: 700rpx;">     <view class="dia-warp">       <text>详情信息</text>       <view wx:for="{{20}}" wx:key="index">{{item}}</view>     </view>   </scroll-view> </dialog> //index.js //获取应用实例 const app = getApp() Page({   data: {   },   onLoad: function () {      },   onDialog () {     console.log('打开我啊')     this.dialog.open()   },   onReady () {     this.dialog = this.selectComponent("#dialog")   } })

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