小程序对话框的实现方式

示例代码:

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

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

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

html
   <!-- dialog.wxml -->
   <view class="dialog">
     <text class="title">{
         
  {title}}</text>
     <text class="content">{
         
  {content}}</text>
     <button class="confirm-button" bindtap="onConfirm">确定</button>
     <button class="cancel-button" bindtap="onCancel">取消</button>
   </view>

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

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

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

html
   <!-- page.wxml -->
   <dialog title="提示" content="这是一个对话框" bind:confirm="onConfirm" bind:cancel="onCancel"></dialog>

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

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

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

经验分享 程序员 微信小程序 职场和发展