小程序_MODAL 模态框弹出提示的几种设置方法

前端 评论

小程序内置 Modal 组件

1
2
3
4
5
6
7
8
9
10
11
wx.showModal({ 
    title: '提示',                        // 定义弹窗标题
    content: '模态弹窗',                   // 定义弹窗内容文本
    success: function (res) {
        if (res.confirm) { 
            console.log('用户点击确定')    // 定义弹窗确认按钮
        }else{ 
            console.log('用户点击取消')    // 定义弹窗取消按钮
        } 
    } 
})

自定义 Modal

  1. Modal 自定义cover-view 用于嵌套在 map/canvas 组件中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- <map/canvas> -->
<cover-view class="modal" wx:if='{{!modalFlag}}'>  
    <!-- <cover-view class="modal" hidden="{{modalFlag}}"> bug 非块级元素使用hidden不生效 使用 wx:if 可替代 注意: wx:if 与 hidden 判断相反 -->
    <cover-view class="dew" wx:for="{{agentList}}" wx:for-item="seller" wx:if="{{index < 1}}" wx:key="seller.name"> 
    <cover-image class='dew-img' src='{{seller.pimg}}'></cover-image>
    <cover-view class="vedw">商家简述: {{seller.des}}</cover-view>  
    <cover-view class="po_w">  
        <cover-view class="titd">{{seller.name}}</cover-view>  
        <cover-view class="addd">{{seller.cityName}}</cover-view>  
    </cover-view>  
    </cover-view>  
    <cover-view class="button cancel" bindtap="modalhide" >退出</cover-view>
    <cover-view class="button confirm" bindtap="modalshow">进入商铺</cover-view>
</cover-view>
<!-- </map/canvas> -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// .wxss
.modal{
    background-color: #fff;
    padding: 40rpx;
    box-sizing: border-box;
    width: 80%;
    height: auto;
    margin: 12% 10%;
    border-radius: 20rpx;
    border: 1rpx #ccc solid
}
.dew-img{
    width: 100%;
    height: 100%
}
.vedw,.po_w{
    line-height: 160%;
}
.button{
    display: block;
    margin: 20rpx 0 0;
    padding: 20rpx;
    font-size: 30rpx;
    width: 40%;
    color: #fff;
    text-align: center;
}
.confirm{
    float: left;
    background-color: rgb(112, 192, 117);
}
.cancel{
    float: right;
    background-color: rgb(186, 0, 0);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// .js
Page({
    data: {
        modalFlag: false 
    },
    modalshow: function (e) {
        this.setData({
            modalFlag: false 
        })
        console.log("进入商铺")
    },
    modalhide: function (e) {
        this.setData({
            modalFlag: true
        })
        console.log("关闭")
    }
})
  1. Modal 自定义 效果同内置
1
2
3
4
// .wxml
<modal hidden="{{hidden}}" title="{{title}}" confirm-text="自定义确定按钮" cancel-text="自定义取消按钮" bindcancel="cancel" bindconfirm="confirm" no-cancel="{{nocancel}}">
    {{content}}
</modal>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// .js
Page({
    data:{
        hidden: false,
        nocancel: false,
        title: "这里是title",
        content: "这是对话框的内容。"
    },
    cancel: function(){
        this.setData({
            hidden: true
        });
    },
    confirm: function(){
        this.setData({
            nocancel: !this.data.nocancel     // 隐藏取消按钮
        });    
        console.log("clicked confirm");
    }
})

几种混合弹窗效果 ( 提示+模态框+上滑菜单 )

1
2
3
4
5
6
7
8
// .wxml
<span style="font-family:Comic Sans MS;font-size:18px;color:#333333;">
    <view class="container" class="zn-uploadimg">  
        <button type="primary"bindtap="showok">消息提示框</button>   
        <button type="primary"bindtap="modalcnt">模态弹窗</button>   
        <button type="primary"bindtap="actioncnt">操作菜单</button>   
    </view>
</span>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// .js
//获取应用实例    
var app = getApp()
Page({
    showok: function () {
        wx.showToast({
        title: '成功',
        icon: 'success',
        duration: 2000
        })
    },
    modalcnt: function () {
        wx.showModal({
        title: '提示',
        content: '这是一个模态弹窗',
        success: function (res) {
            if (res.confirm) {
            console.log('用户点击确定')
            } else if (res.cancel) {
            console.log('用户点击取消')
            }
        }
        })
    },
    actioncnt: function () {
        wx.showActionSheet({
        itemList: ['A', 'B', 'C'],
        success: function (res) {
            console.log(res.tapIndex)
        },
        fail: function (res) {
            console.log(res.errMsg)
        }
        })
    }  
})

模拟短信验证 ( modal+输入框 )

1
2
3
4
5
6
7
// .wxml
<view class="container" class="zn-uploadimg">  
    <button type="primary"bindtap="modalinput">modal有输入框</button>   
</view>  
<modal hidden="{{hiddenmodalput}}" title="请输入验证码" confirm-text="提交" cancel-text="重置" bindcancel="cancel" bindconfirm="confirm">  
    <input type='text'placeholder="请输入内容" auto-focus/>  
</modal>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// .js
var app = getApp()    
Page({  
    data:{  
        hiddenmodalput:true,  
        //可以通过hidden是否掩藏弹出框的属性，来指定那个弹出框  
    },  
    //点击按钮痰喘指定的hiddenmodalput弹出框  
    modalinput:function(){  
        this.setData({  
        hiddenmodalput: !this.data.hiddenmodalput  
        })  
    },  
    //取消按钮  
    cancel: function(){  
        this.setData({  
            hiddenmodalput: true  
        });  
    },  
    //确认  
    confirm: function(){  
        this.setData({  
            hiddenmodalput: true  
        })  
    }  

})

一般使用默认组件设置自定义样式，会带给用户更优质的操作体验，性能和美观度方面都是比较良好的~

Merlin Frontend Developer

一个前端。