微信小程序开发之——Dialog弹窗

发表于 分类于 ， ， 阅读时长 ≈ 3 分钟

一 概述

小程序中弹窗的两种方式：

  • modal弹窗
  • WeUI组件dialog

二 弹窗原理

  • 在布局中事先放置好要显示的Dialog布局
  • 通过一个参数dialogShow控制Dialog的显示与隐藏
  • 点击按钮时，通过 this.setData({ dialogShow: false,})改变Dialog的值并改变Dialog的状态

三 modal弹窗

3.1 布局文件(modal.wxml)

1
2
3
4
5
6
7
8
9
10
11
12
<view class="container-view">
  <view>主题内容</view>
</view>
<!--modal-->
<!--弹窗-->
<view>
  <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}">
    <view class="modal-dialog" wx:if="{{showModal}}">
      <video src="https://res.wx.qq.com/wxaliveplayer/htdocs/video14e1eea.mov"></video>
    </view>
  </view>
</view>

3.2 样式文件(modal.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
29
30
31
32
33
34
35
36
37
38
39
40
.container-view {
  width: 100vh;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.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: 70%;
  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;
}

.container-view {
  width: 100%;
  height: 100%;
}

3.3 逻辑文件(modal.js)

1
2
3
4
5
Page({
  data: {
    showModal:true
  },
})

3.4 显示效果

四 WeUI组件dialog

4.1 项目引入WeUI

微信小程序开发之——WeUI快速上手

4.2 布局文件(dialog.wxml)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<view class="page" data-weui-theme="{{theme}}">
  <view class="page__bd">
    <view class="weui-btn-area">
      <button class="weui-btn" type="default" bindtap="openConfirm">确认取消按钮</button>
      <button class="weui-btn" type="default" bindtap="tapOneDialogButton">只有确认按钮</button>
    </view>
  </view>
  <mp-dialog title="test" show="{{dialogShow}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">
    <view>test content</view>
  </mp-dialog>
  <mp-dialog title="test1" show="{{showOneButtonDialog}}" bindbuttontap="tapDialogButton" buttons="{{oneButton}}">
    <view>test content1</view>
  </mp-dialog>
</view>

4.3 逻辑文件(dialog.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Page({
  data: {
    dialogShow: false,
    showOneButtonDialog: false,
    buttons: [{text: '取消'}, {text: '确定'}],
    oneButton: [{text: '确定'}],
  },
  openConfirm: function () {
    this.setData({
      dialogShow: true
    })
  },
  tapDialogButton(e) {
    this.setData({
      dialogShow: false,
      showOneButtonDialog: false
    })
  },
  tapOneDialogButton(e) {
    this.setData({
      showOneButtonDialog: true
    })
  }
})

4.4 显示效果图

五 参考

  • CSDN下载-dialog