微信小程序自定义弹窗组件

popup-component

介绍

微信小程序——自定义弹窗组件

软件架构

微信小程序

效果图

传入不同参数，实现效果不一样。具体详情请看自定义组件中js文件注释

安装教程

​ 下载项目后微信开发工具或其他打开即可

原文请下载

请点击下载

使用说明

使用自定义组件

1. 使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：

   {
       "usingComponents": {
           "my-popup": "/page/components/popup/popup"
       }
   }
   

2. 在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

   说明 demo中应用如何修改自定义组件中样式【查看组件接受外部修改类样式】

   <!-- 使用自定义弹窗组件 -->
   <my-popup id="popup"
       bind:error= "_error"
       bind:success= "_success"
       content= "{{popupContent}}"
       desc="{{popupDesc}}"
       my-class="red-text"
       isShowBtn= "{{isShowBtn}}"
       >
   
       <text>插入slot中【根据需求】</text>
   </my-popup>
   

3. 在页面js中获取组件实例， 并传递相关属性及方法实现。

   3.1 在onReady()方法中获取组件实例

   // 获取popup组件, 调用组件的方法
   this.popup = this.selectComponent('#popup');
   

   3.2 在data中定义属性【动态更改属性值】

   data: {
       isShowBtn: false, //是否显示取消按钮
       popupContent: '微信小程序自定义组件？', //内容
       popupDesc: '', //描述
   },
   

   3.3 定义控制显示、关闭弹窗相关方法

   /**
   * 取消
   */
   _error: function () {
       this.popup.hidePopup();
   },
   
   /**
   * 确认
   */
   _success: function () {
       this.popup.showPopup();
       console.log("处理逻辑。。。。。。");
   },
   
   /**
   * 显示弹窗事件
   */
   showPopup: function () {
       this.popup.showPopup();
   }