在小程序中自定义弹窗组件

3,493 阅读3分钟

因为业务需要在小程序里加上很多的弹窗,就想写一个组件方便使用;

创建组件

  1. 新建文件夹component专门放组件,
  2. 新建popup页面,在popup.json中设置:
{
    "component": true
}

表明它是一个组件,我们称之为“子组件” 3. 注意:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。(只使用class)

如何使用组件

便于区分,引用子组件的页面我们称之为“父组件,” 在父组件的json里先引用子组件:

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

父组件传值给子组件

因为这个自定义的弹窗组件会应用于很多不同的页面,所以显示的弹窗标题也是不同的,这就是需要父组件给子组件自定义标题,也就是子组件的标题应该从父组件中接受到的。 子组件里: wxml

<view class="page">
  <view>{{popupTitle}}</view>
</view>

js

Component({
  properties: {
    // 这里定义了innerText属性,属性值可以在组件使用时指定
    popupTitle: { //弹窗标题
      type: String,
      value: '默认值', 
    }
  },
})

父组件里: wxml

<popup popup-title="{{pagetitle}}"/>

js

  data: {
    pagetitle: '我是页面标题',
}

. 在子组件中自定义值是以小驼峰的形式书写的,但是在父组件传的时候要以“-”连接。

子组件改变父组件的值

这个组件的显示和隐藏都是在父组件决定的,但是因为我这是一个全屏的弹窗,覆盖了整个屏幕,所以想要关闭弹框只能想办法在子组件的点击事件上想办法。 基本逻辑是这样的: 操作流程:打开页面- 点击弹框(弹出子组件)- 点击关闭(点击子组件关闭弹窗) 数据流程:打开页面-点击弹框(传入弹窗标题、点赞成功结果、其他参数)-点击关闭(在父组件上自定义组件,然后子组件关闭按钮监听onTap事件,点击子组件关闭按钮时,会通知父组件去改变状态)

逻辑:

  1. 在子组件中给要触发的元素加 bindtap = 'onTap'
  2. 然后通过在method中设置onTap函数
  3. 在onTap中的triggerEvent中设置要触发父组件事件的函数名称
  4. 父组件接收到字组件的消息,然后触发事件

具体参考:小程序-组件通信

子组件: wxml

<view class="hide-btn" bindtap="onTap">×</view>

js

  methods: { //放自定义的方法
    onTap: function () {
      var myEventDetail = {} // detail对象,提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      console.log(`子组件:'向父组件发送通知,我要关闭弹窗'`)
      this.triggerEvent('hidepopop', myEventDetail, myEventOption)
    }
  },

父组件 wxml

  <popup 
bindhidepopop="hidePopop" 
is-show-popup="{{isShowPopup}}" 
popup-title="{{popupTitle}}" 
popup-content="{{popupContent}}"
/>

js

  hidePopop: function(e) {
    console.log(e.detail) // 自定义组件触发事件时提供的detail对象
    console.log('父组件:我接受到了子组件的关闭弹窗的通知!');
    this.setData({
      isShowPopup: true
    })
  }

参考小程序-自定义组件 代码地址:github.com/AnsonZnl/wx…