导航：首页 > 开发技术 >

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

发表于：2025-01-21 作者：千家信息网编辑

千家信息网最后更新 2025年01月21日，今天就跟大家聊聊有关微信小程序如何实现简易封装弹窗，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。1.建立组件文件夹2.编写组件内容 demo 01 heihzi 点击打开弹窗

// 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')      }    }  }})

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

/* 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.页面中使用

  demo 01 heihzi  点击 打开弹窗            详情信息      {{item}}

//index.js//获取应用实例const app = getApp()Page({  data: {  },  onLoad: function () {    },  onDialog () {    console.log('打开我啊')    this.dialog.open()  },  onReady () {    this.dialog = this.selectComponent("#dialog")  }})

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

很赞哦！