欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

小程序极速实战开发《十八》modal显示模态弹窗

发布：2018-01-25 16:29浏览： 次来源：网络 作者：tianshu

组件说明:

显示模态弹窗
wx.showModal(OBJECT)

组件用法：

小程序极速实战开发《十八》modal显示模态弹窗(图1)

 

wxml

  1. <view class="page">
  2.   <view class="page__hd">
  3.     <text class="page__title">modal</text>
  4.     <text class="page__desc">模式对话框</text>
  5.   </view>
  6.   <view class="page__bd">
  7.     <view class="btn-area">
  8.       <button type="default" bindtap="showModel1">简单设定的modal</button>
  9.       <button type="default" bindtap="showModel2">全部自定义设定的modal2</button>
  10.     </view>
  11.   </view>
  12. </view>

js

  1. Page({
  2.   data: {
  3.   },
  4.   showModel1:function(){
  5.     wx.showModal({
  6.       title: '提示',
  7.       content: '这是一个简单设置的弹窗',
  8.       success: function(res) {
  9.         if (res.confirm) {
  10.           console.log('用户点击确定')
  11.         }
  12.       }
  13.     })
  14.   },
  15.   showModel2:function(){
  16.     wx.showModal({
  17.       title: '提示',
  18.       content: '这是一个设定过全部属性模态弹窗',
  19.       showCancel: true,
  20.       confirmText:'好的',
  21.       confirmColor:'#FF0000',
  22.       cancelText: '算了',
  23.       cancelColor:'#999999',
  24.       success: function(res) {
  25.         if (res.confirm) {
  26.           console.log('用户点击确定');
  27.         }else{
  28.           console.log('用户点击取消');
  29.         }
  30.       },
  31.       fail:function(){
  32.         console.log('接口调用失败');
  33.       },
  34.       complete:function(){
  35.         console.log('接口调用结束')
  36.       }
  37.     })
  38.   },
  39. })

wxss

  1. .page {
  2.     min-height: 100%;
  3.     flex: 1;
  4.     background-color: #FBF9FE;
  5.     font-size: 32rpx;
  6.     font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
  7.     overflow: hidden;
  8. }
  9. .page__hd{
  10.     padding: 50rpx 50rpx 100rpx 50rpx;
  11.     text-align: center;
  12. }
  13. .page__title{
  14.     display: inline-block;
  15.     padding: 20rpx 40rpx;
  16.     font-size: 32rpx;
  17.     color: #AAAAAA;
  18.     border-bottom: 1px solid #CCCCCC;
  19. }
  20. .page__desc{
  21.     display: none;
  22.     margin-top: 20rpx;
  23.     font-size: 26rpx;
  24.     color: #BBBBBB;
  25. }
  26. .btn-area{
  27.     padding: 0 30px;
  28. }
  29. .btn-area button{
  30.     margin-top: 20rpx;
  31.     margin-bottom: 20rpx;
  32. }

主要属性：
参数
类型
必填
说明
title String 是 提示的标题
content String 是 提示的内容
showCancel Boolean 否 是否显示取消按钮，默认为 true
cancelText String 否 取消按钮的文字，默认为”取消”，最多 4 个字符
cancelColor HexColor 否 取消按钮的文字颜色，默认为”#000000”
confirmText String 否 确定按钮的文字，默认为”确定”，最多 4 个字符
confirmColor HexColor 否 确定按钮的文字颜色，默认为”#3CC51F”
success Function 否 接口调用成功的回调函数，返回res.confirm为true时，表示用户点击确定按钮
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）





免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有