微信小程序实战之自定义模态弹窗（8）-前端开发

关于“微信小程序实战之自定义模态弹窗（8）”，我将从以下几个方面进行详细讲解：

关于“微信小程序实战之自定义模态弹窗（8）”，我将从以下几个方面进行详细讲解：

创建自定义模态弹窗组件
在需要使用的页面中引入自定义组件
调用自定义组件并传递参数
示例说明

1. 创建自定义模态弹窗组件

创建自定义组件有两种方式，一种是使用 wepy 进行开发，另一种是使用 原生 小程序开发方式。下面是使用 原生 小程序开发方式创建自定义模态弹窗组件：

首先，在 components 目录下新建一个文件夹，命名为 modal。在 modal 文件夹下新建两个文件：

modal.wxml：模态弹窗的结构
modal.wxss：模态弹窗的样式

然后，在 modal.wxml 文件中编写模态弹窗的结构，示例如下：

<view class="modal-wrapper" catchtouchmove="{{catchMove}}">
  <view class="modal-content">
    <view>{{title}}</view>
    <view>{{content}}</view>
    <button class="confirm-btn" bindtap="confirm">确定</button>
    <button class="cancel-btn" bindtap="cancel">取消</button>
  </view>
</view>

在 modal.wxss 文件中编写模态弹窗的样式，示例如下：

.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.modal-content {
  width: 80%;
  max-width: 500rpx;
  min-height: 150rpx;
  border-radius: 10rpx;
  background-color: #fff;
  padding: 20rpx;
  text-align: center;
}

.confirm-btn {
  background-color: #007aff;
  color: #fff;
  border-radius: 5rpx;
  width: 45%;
  margin-top: 20rpx;
  margin-right: 5%;
  padding: 10rpx 0;
}

.cancel-btn {
  background-color: #fff;
  color: #007aff;
  border-radius: 5rpx;
  width: 45%;
  margin-top: 20rpx;
  margin-left: 5%;
  padding: 10rpx 0;
}

此外，还需要在 modal.js 文件中编写相应的逻辑代码：

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String,
      value: '提示'
    },
    content: {
      type: String,
      value: ''
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    catchMove: true
  },

  /**
   * 组件的方法列表
   */
  methods: {
    confirm: function() {
      this.triggerEvent('confirm');
    },
    cancel: function() {
      this.triggerEvent('cancel');
    }
  }
})

其中，confirm 和 cancel 方法分别用于触发自定义事件，以便在父组件中监听并处理相应的逻辑。需要注意的是，父组件中监听自定义事件时的方法名应该是 confirm 或者 cancel。

2. 在需要使用的页面中引入自定义组件

在需要使用模态弹窗的页面中，可以在 json 文件中配置引入：

{
  "usingComponents": {
    "modal": "路径/modal/modal"
  }
}

其中，路径 是指引入模态弹窗组件的路径，需要根据实际情况进行配置。这样，在需要使用模态弹窗的页面中就可以使用 modal 标签进行调用了。

3. 调用自定义组件并传递参数

在使用模态弹窗时，需要通过 modal 组件标签的属性来传递参数。示例如下：

<modal title="提示" content="确定删除吗？" bind:confirm="onConfirm" bind:cancel="onCancel"></modal>

其中，title 属性用于设置模态弹窗的标题，content 属性用于设置模态弹窗的提示内容。bind:confirm 和 bind:cancel 属性用于监听组件的确认和取消操作，并触发相应的事件。

需要注意的是，确认和取消事件触发时可以通过事件对象传递一些额外的数据，如下所示：

// 在组件中触发事件，并传递额外数据
this.triggerEvent('confirm', { data: 123 });

// 在父组件中监听事件，并获取额外数据
onConfirm: function(event) {
  var data = event.detail.data;
}

4. 示例说明

下面通过两个示例来说明如何使用自定义模态弹窗组件。

示例一：删除操作

在一个类似于用户中心的页面中，要实现删除某个列表项的功能。首先，在界面上添加一个删除按钮，并绑定点击事件：

<button bindtap="deleteItem">删除</button>

然后，定义对应的事件处理函数，弹出模态弹窗：

deleteItem: function() {
  this.setData({
    showModal: true
  });
}

在数据绑定中添加 showModal 属性，用于控制模态弹窗的显示和隐藏：

<modal title="提示" content="确定删除吗？" bind:confirm="onConfirm" bind:cancel="onCancel" hidden="{{!showModal}}"></modal>

在事件处理函数中，监听 confirm 事件，触发删除操作，然后关闭模态弹窗：

onConfirm: function() {
  // 执行删除操作
  ...

  // 关闭模态弹窗
  this.setData({
    showModal: false
  });
},

在 onCancel 处理函数中，仅需要关闭模态弹窗即可：

onCancel: function() {
  this.setData({
    showModal: false
  });
},

示例二：修改用户名

在一个用户个人信息页面中，要实现修改用户名的功能。首先，在界面上添加一个修改按钮，并绑定点击事件：

<button bindtap="updateName">修改</button>

然后，在事件处理函数中弹出模态弹窗：

updateName: function() {
  this.setData({
    showModal: true
  });
}

在模态弹窗的标题和提示内容中，分别设置相应的提示信息：

<modal title="修改用户名" content="请输入新的用户名：" bind:confirm="onConfirm" bind:cancel="onCancel" hidden="{{!showModal}}"></modal>

然后，在 onConfirm 处理函数中获取用户输入的新用户名，进行验证并执行相应的操作：

onConfirm: function(event) {
  var newUserName = event.detail.value;

  // 进行新用户名的验证操作
  ...

  // 执行用户名修改操作
  ...

  // 关闭模态弹窗
  this.setData({
    showModal: false
  });
},