PanBlog

小破

发表于

微信小程序自定义弹窗

  • 在wxml最外层增加弹窗布局文件，如下：
1
2
3
4
5
6
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModel}}">
    <view class="modal-dialog" wx:if="{{showModel}}">
        <button type="primary">同意</button>
        <button type="warn">拒绝</button>
    </view>
</view>
  • 在wxss样式文件中增加：
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
.modal-mask {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}
  
.modal-dialog {
    width: 80%;
    height: 60%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: fixed;
    margin: 0 auto;
    z-index: 9999;
    background: #f9f9f9;
    border-radius: 36rpx;
}
  • 在js文件中增加弹窗控制逻辑：
1
2
3
4
5
6
7
8
9
10
11
12
Page({
    data: {
        showModel: false,//控制弹窗是否显示
    },

    //隐藏弹窗
    hideModal(){
        this.setData({
            showPrivacy: false,
        })
    },
})

发表于 更新于

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

0%