微信小程序如何实现简易封装弹窗

今天就跟大家聊聊有关微信小程序如何实现简易封装弹窗，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

建立组件文件夹

编写组件内容

 <!--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 >    <view class="dia-warp">      <text>详情信息</text>      <view wx:for="{{20}}" wx:key="index">{{item}}</view>    </view>  </scroll-view></dialog>

// components/dialong/index.jsComponent({    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')      }    }  }})

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

.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"  },

页面中使用

<!--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 >    <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")  }})

看完上述内容，你们对微信小程序如何实现简易封装弹窗有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注编程网行业资讯频道，感谢大家的支持。