-
移动开发
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
白羽
2018-07-03
来源 ：网络
阅读 1073
评论 0
摘要：本文将带你了解微信小程序开发之自定义模态弹窗，希望本文对大家学微信有所帮助。
首先看看官方提供的模态弹窗
api如下：
示例：
这样的模态弹窗，充其量只能做个alert，提示一下信息。
但是并不能使用它来处理复杂性的弹窗业务，因此写了Michael从新自定义了一个，采用了仿原生的样式写法
wxml：
[html] view plain copy print?
1. <!--button-->
2. <view class="btn" bindtap="powerDrawer" data-statu="open">button</view>
3.
4. <!--mask-->
5. <view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>
6. <!--content-->
7. <!--使用animation属性指定需要执行的动画-->
8. <view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}">
9.
10. <!--drawer content-->
11. <view class="drawer_title">弹窗标题</view>
12. <view class="drawer_content">
13. <view class="top grid">
14. <label class="title col-0">标题</label>
15. <input class="input_base input_h30 col-1" name="rName" value="可自行定义内容"></input>
16. </view>
17. <view class="top grid">
18. <label class="title col-0">标题</label>
19. <input class="input_base input_h30 col-1" name="mobile" value="110"></input>
20. </view>
21. <view class="top grid">
22. <label class="title col-0">标题</label>
23. <input class="input_base input_h30 col-1" name="phone" value="拒绝伸手党"></input>
24. </view>
25. <view class="top grid">
26. <label class="title col-0">标题</label>
27. <input class="input_base input_h30 col-1" name="Email" value="仅供学习使用"></input>
28. </view>
29. <view class="top bottom grid">
30. <label class="title col-0">备注</label>
31. <input class="input_base input_h30 col-1" name="bz"></input>
32. </view>
33. </view>
34. <view class="btn_ok" bindtap="powerDrawer" data-statu="close">确定</view>
35. </view>
wxss：
[css] view plain copy print?
1. /*button*/
2. .btn {
3. width: 80%;
4. padding: 20rpx 0;
5. border-radius: 10rpx;
6. text-align: center;
7. margin: 40rpx 10%;
8. background: #000;
9. color: #fff;
10. }
11.
12. /*mask*/
13. .drawer_screen {
14. width: 100%;
15. height: 100%;
16. position: fixed;
17. top: 0;
18. left: 0;
19. z-index: 1000;
20. background: #000;
21. opacity: 0.5;
22. overflow: hidden;
23. }
24.
25. /*content*/
26. .drawer_box {
27. width: 650rpx;
28. overflow: hidden;
29. position: fixed;
30. top: 50%;
31. left: 0;
32. z-index: 1001;
33. background: #FAFAFA;
34. margin: -150px 50rpx 0 50rpx;
35. border-radius: 3px;
36. }
37.
38. .drawer_title{
39. padding:15px;
40. font: 20px "microsoft yahei";
41. text-align: center;
42. }
43. .drawer_content {
44. height: 210px;
45. overflow-y: scroll; /*超出父盒子高度可滚动*/
46. }
47.
48. .btn_ok{
49. padding: 10px;
50. font: 20px "microsoft yahei";
51. text-align: center;
52. border-top: 1px solid #E8E8EA;
53. color: #3CC51F;
54. }
55.
56. .top{
57. padding-top:8px;
58. }
59. .bottom {
60. padding-bottom:8px;
61. }
62. .title {
63. height: 30px;
64. line-height: 30px;
65. width: 160rpx;
66. text-align: center;
67. display: inline-block;
68. font: 300 28rpx/30px "microsoft yahei";
69. }
70.
71. .input_base {
72. border: 2rpx solid #ccc;
73. padding-left: 10rpx;
74. margin-right: 50rpx;
75. }
76. .input_h30{
77. height: 30px;
78. line-height: 30px;
79. }
80. .input_h60{
81. height: 60px;
82. }
83. .input_view{
84. font: 12px "microsoft yahei";
85. background: #fff;
86. color:#000;
87. line-height: 30px;
88. }
89.
90. input {
91. font: 12px "microsoft yahei";
92. background: #fff;
93. color:#000 ;
94. }
95. radio{
96. margin-right: 20px;
97. }
98. .grid { display: -webkit-box; display: box; }
99. .col-0 {-webkit-box-flex:0;box-flex:0;}
100. .col-1 {-webkit-box-flex:1;box-flex:1;}
101. .fl { float: left;}
102. .fr { float: right;}
js：
[javascript] view plain copy print?
1. Page({
2. data: {
3. showModalStatus: false
4. },
5. powerDrawer: function (e) {
6. var currentStatu = e.currentTarget.dataset.statu;
7. this.util(currentStatu)
8. },
9. util: function(currentStatu){
10. /* 动画部分 */
11. // 第1步：创建动画实例
12. var animation = wx.createAnimation({
13. duration: 200, //动画时长
14. timingFunction: "linear", //线性
15. delay: 0 //0则不延迟
16. });
17.
18. // 第2步：这个动画实例赋给当前的动画实例
19. this.animation = animation;
20.
21. // 第3步：执行第一组动画
22. animation.opacity(0).rotateX(-100).step();
23.
24. // 第4步：导出动画对象赋给数据对象储存
25. this.setData({
26. animationData: animation.export()
27. })
28.
29. // 第5步：设置定时器到指定时候后，执行第二组动画
30. setTimeout(function () {
31. // 执行第二组动画
32. animation.opacity(1).rotateX(0).step();
33. // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象
34. this.setData({
35. animationData: animation
36. })
37.
38. //关闭
39. if (currentStatu == "close") {
40. this.setData(
41. {
42. showModalStatus: false
43. }
44. );
45. }
46. }.bind(this), 200)
47.
48. // 显示
49. if (currentStatu == "open") {
50. this.setData(
51. {
52. showModalStatus: true
53. }
54. );
55. }
56. }
57.
58. })
运行：
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
