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

组件说明:

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

组件用法：

(此图片来源于网络，如有侵权，请联系删除! )

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. }

主要属性：

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