本文实例为大家分享了小程序自定义弹框效果的具体代码,供大家参考,具体内容如下
wxml
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
|
<!--button-->
< view class = "btn" bindtap = "powerDrawer" data-statu = "open" >来点我呀</ view >
<!--mask-->
< view class = "drawer_screen" bindtap = "powerDrawer" data-statu = "close" wx:if = "{{showModalStatus}}" ></ view >
<!--content-->
<!--使用animation属性指定需要执行的动画-->
< view animation = "{{animationData}}" class = "drawer_box" wx:if = "{{showModalStatus}}" >
<!--drawer content-->
< view class = "drawer_title" >弹窗标题</ view >
< view class = "drawer_content" >
< view class = "top grid" >
< label class = "title col-0" >标题</ label >
< input class = "input_base input_h30 col-1" name = "rName" value = "可自行定义内容" ></ input >
</ view >
< view class = "top grid" >
< label class = "title col-0" >标题</ label >
< input class = "input_base input_h30 col-1" name = "mobile" value = "110" ></ input >
</ view >
< view class = "top grid" >
< label class = "title col-0" >标题</ label >
< input class = "input_base input_h30 col-1" name = "phone" value = "拒绝伸手党" ></ input >
</ view >
< view class = "top grid" >
< label class = "title col-0" >标题</ label >
< input class = "input_base input_h30 col-1" name = "Email" value = "仅供学习使用" ></ input >
</ view >
< view class = "top bottom grid" >
< label class = "title col-0" >备注</ label >
< input class = "input_base input_h30 col-1" name = "bz" ></ input >
</ view >
</ view >
< view class = "btn_ok" bindtap = "powerDrawer" data-statu = "close" >确定</ 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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
/*button*/
.btn {
width : 80% ;
padding : 20 rpx 0 ;
border-radius: 10 rpx;
text-align : center ;
margin : 40 rpx 10% ;
background : #000 ;
color : #fff ;
}
/*mask*/
.drawer_screen {
width : 100% ;
height : 100% ;
position : fixed ;
top : 0 ;
left : 0 ;
z-index : 1000 ;
background : #000 ;
opacity: 0.75 ;
overflow : hidden ;
}
/*content*/
.drawer_box {
width : 650 rpx;
overflow : hidden ;
position : fixed ;
top : 50% ;
left : 0 ;
z-index : 1001 ;
background : #FAFAFA ;
margin : -150px 50 rpx 0 50 rpx;
border-radius: 3px ;
}
.drawer_title{
padding : 15px ;
font : 20px "microsoft yahei" ;
text-align : center ;
}
.drawer_content {
height : 210px ;
overflow-y: scroll ; /*超出父盒子高度可滚动*/
}
.btn_ok{
padding : 10px ;
font : 20px "microsoft yahei" ;
text-align : center ;
border-top : 1px solid #E8E8EA ;
color : #3CC51F ;
}
. top {
padding-top : 8px ;
}
. bottom {
padding-bottom : 8px ;
}
.title {
height : 30px ;
line-height : 30px ;
width : 160 rpx;
text-align : center ;
display : inline- block ;
font : 300 28 rpx/ 30px "microsoft yahei" ;
}
.input_base {
border : 2 rpx solid #ccc ;
padding-left : 10 rpx;
margin-right : 50 rpx;
}
.input_h 30 {
height : 30px ;
line-height : 30px ;
}
.input_h 60 {
height : 60px ;
}
.input_view{
font : 12px "microsoft yahei" ;
background : #fff ;
color : #000 ;
line-height : 30px ;
}
input {
font : 12px "microsoft yahei" ;
background : #fff ;
color : #000 ;
}
radio{
margin-right : 20px ;
}
.grid { display : -webkit-box; display : box; }
.col -0 {-webkit-box-flex: 0 ;box-flex: 0 ;}
.col -1 {-webkit-box-flex: 1 ;box-flex: 1 ;}
.fl { float : left ;}
.fr { float : right ;}
|
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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
Page({
data: {
showModalStatus: false
},
powerDrawer: function (e) {
var currentStatu = e.currentTarget.dataset.statu;
this .util(currentStatu)
},
util: function (currentStatu){
/* 动画部分 */
// 第1步:创建动画实例
var animation = wx.createAnimation({
duration: 200, //动画时长
timingFunction: "linear" , //线性
delay: 0 //0则不延迟
});
// 第2步:这个动画实例赋给当前的动画实例
this .animation = animation;
// 第3步:执行第一组动画
animation.opacity(0).rotateX(-100).step();
// 第4步:导出动画对象赋给数据对象储存
this .setData({
animationData: animation.export()
})
// 第5步:设置定时器到指定时候后,执行第二组动画
setTimeout( function () {
// 执行第二组动画
animation.opacity(1).rotateX(0).step();
// 给数据对象储存的第一组动画,更替为执行完第二组动画的动画对象
this .setData({
animationData: animation
})
//关闭
if (currentStatu == "close" ) {
this .setData(
{
showModalStatus: false
}
);
}
}.bind( this ), 200)
// 显示
if (currentStatu == "open" ) {
this .setData(
{
showModalStatus: true
}
);
}
}
})
|
仅供参考。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/JSN___/article/details/109489652