小程序调用弹窗组件后，需要在页面其他组件操作弹窗显示时，和弹窗自身关闭的逻辑

主要介绍，小程序调用弹窗组件后，需要在页面其他组件操作弹窗显示时，和弹窗自身关闭的逻辑

我们一起看看首页的部分源代码

wxml页面的页面结构

<view class="page-home">
  <!-- 公共组件 - 需要调用弹窗显示隐藏的组件 -->
  <pageModel bind:showSubscribe="showSubscribe"></pageModel>
  <!-- 公共组件 - 预约提示弹窗 -->
  <popText popData="{{popData}}"></popText>
</view>

• 解读一下代码
  • 首先 我们需要在调用弹窗显示的组件上绑定一个方法 【showSubscribe】这个方法来自首页的js方法里面
  • 其次我们要给需要被控制显示隐藏的弹窗传一个显示隐藏的变量

js代码

/* 控制弹窗显示隐藏的变量 */
popData: {
  isShow: false
}

/* 触发显示弹窗的方法 - 也是绑定在组件上的方法 */
showSubscribe: function () {
  this.setData({
    'popData.isShow': true
  })
}

下面我们看你一下需要调用弹窗显示组件的代码

首先看看需要调用弹窗显示组件的wxml页面，触发显示弹窗的按钮

<!-- 点击显示弹窗 -->
<button bindtap="showPop">显示弹窗</button>

一起看看js的事件

/**
 * 组件的方法列表
 */
methods: {
  /* 在按钮上绑定的事件 */
  showPop() {
    // 调用一遍首页传过来的数据
    this.triggerEvent('showSubscribe', true);
  },
},

我们再看看弹窗自身的代码

首先我们看看通过变量显示弹窗的wxml

<!-- 弹窗主体 -->
<view class="modal" wx:if="{{popData.isShow}}">
  <!-- 关闭按钮 -->
  <view class="modal-bg modal-close"></view>
  <!-- 弹窗内容 -->
  <view class="modal-content">
    弹窗内容.........
  </view>
</view>

我们再看看弹窗的js代码

/**
 * 组件的属性列表 - 这里放置调用组件时需要传入值得数据
 */
properties: {
  // 控制弹窗显示和隐藏得变量
  popData: {
    // 声明数据类型
    type: Object,
    // 变量内容
    value: {
      isShow: true,
    }
  }
},

/**
 * 组件的方法列表
 */
methods: {
  // 关闭弹窗事件 - 直接改变变量值即可
  close() {
    this.setData({
      "popData.isShow": false
    })
  }
}

以上就是小程序调用弹窗组件后，需要在首页其他组件操作弹窗显示时，和弹窗自身关闭的所有逻辑