zoukankan      html  css  js  c++  java
  • 微信小程序弹出对话框

    什么是对话框

    对话框是微信小程序的,界面交互的一种方式,其他的还有toast等。

    https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html

    怎么使用

    下面是一个官方的使用方式,用触发时间来触发即可

    <view>
    <button bindtap="showWindows" class="showWindows">弹窗</button>
    </view>
    
    showWindows: function() {
    wx.showModal({
      title: '提示',
      content: '这是一个模态弹窗',
      success (res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
    }
    

    如何把信息传到弹出界面

    在wxml文件里面 {{data.showWindows.Content}} 把内容传上去即可

    
    <view>
      <button bindtap="bindViewTap">点击弹出对话框</button>
      <view >
        <modal title="对话框" hidden="{{modalHidden}}" confirm-text="确定"
        cancel-text="取消" bindconfirm="modalBindaconfirm" bindcancel="modalBindcancel">
          {{data.showWindows.Content}}
        </modal>
      </view>
    
    //获取应用实例
    var app = getApp()
    Page({
      data: {
        modalHidden:true,//是否隐藏对话框
      },
      //事件处理函数
      bindViewTap: function() {
        this.setData({
          modalHidden:!this.data.modalHidden
        })
        
      },
      //确定按钮点击事件
      modalBindaconfirm:function(){
        this.setData({
          modalHidden:!this.data.modalHidden,
        })
      },
      //取消按钮点击事件
      modalBindcancel:function(){
        this.setData({
          modalHidden:!this.data.modalHidden,
        })
      },  
    })
    

    部分可以参见这个 https://blog.csdn.net/hezhixiu/article/details/75309359

  • 相关阅读:
    正则表达式
    爬虫原理和网页构造
    简单的博客系统之二
    配置编辑器geany
    linux删除多文件
    eNSP交换路由基础
    NTP centOS6.5
    shell脚本之lftp上传
    进度条
    maketrans与translate函数
  • 原文地址:https://www.cnblogs.com/ievjai/p/14382684.html
Copyright © 2011-2022 走看看