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

九旬

发布于 2020-10-23 15:50:05

2.8K0

发布于 2020-10-23 15:50:05

文章被收录于专栏：九旬大爷九旬大爷九旬大爷

因为业务需要在小程序里加上很多的弹窗，就想写一个组件来实现；

#创建组件

新建文件夹component专门放组件，
新建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>

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

父组件里： wxml

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

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

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

#子组件改变父组件的值

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

逻辑：

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

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

子组件： wxml

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

  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}}"
/>

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