小程序对话框的几种实现方式

在微信小程序中，有以下几种方式可以实现对话框（Dialog）的展示：

1. wx.showModal：wx.showModal 是微信小程序提供的一个api，用于显示模态对话框。模态对话框是一种阻塞式的对话框，需要用户进行交互后才能关闭。可以通过调用 wx.showModal 方法来显示对话框，并设置标题、内容、按钮等参数。用户点击按钮后，可以通过回调函数获取用户的选择结果。

   示例代码：

 javascript   wx.showModal({     title: '提示',     content: '这是一个对话框',     success: function (res) {       if (res.confirm) {         console.log('用户点击确定')       } else if (res.cancel) {         console.log('用户点击取消')       }     }   })

2. 自定义组件：可以通过自定义组件的方式来创建自定义的对话框。自定义组件可以提供更加灵活的样式和交互效果，以满足特定的需求。可以在小程序的组件目录中创建一个自定义组件，然后在需要使用对话框的页面中引用和调用该组件。

   示例代码：
   在对话框组件的 wxml 文件中定义对话框的样式和内容：

html           {{title}}     {{content}}     确定     取消   

   在对话框组件的 js 文件中定义对话框的行为：

javascript   // dialog.js   Component({     properties: {       title: String,       content: String     },     methods: {       onConfirm() {         // 用户点击确定按钮的逻辑处理         this.triggerEvent('confirm');       },       onCancel() {         // 用户点击取消按钮的逻辑处理         this.triggerEvent('cancel');       }     }   })

   在需要使用对话框的页面中引用和调用自定义组件：

html      

   在页面的 js 文件中处理对话框的逻辑：

javascript   // page.js   Page({     onConfirm() {       console.log('用户点击确定');     },     onCancel() {       console.log('用户点击取消');     }   })

以上是两种常见的对话框实现方式，可以根据具体的需求选择合适的方式来创建对话框。

来源地址：https://blog.csdn.net/u010231454/article/details/131570951