微信小程序自定义对话框

作者：Happy__EveryDay，来自授权地址

效果图：

index.wxml：

1. <button type="default" bindtap="clickbtn">
2. 点击
3. </button>
4. <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
5. <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
6. <!--对话框标题-->
7. <view class="dialog-title">
8. 请输入内容
9. </view>
10. <!--对话框输入部分-->
11. <view class="input-view">
12. <input type="text" bindblur="input_content" class="input-style"/>
13. </view>
14. <!--对话框按钮-->
15. <view class="line-top">
16. </view>
17. <view class="btn-view">
18. <view class="btn-cancel" bindtap="click_cancel">
19. 取 消
20. </view>
21. <view class="btn-line">
22. </view>
23. <view class="btn-cancel" bindtap="click_ok">
24. 确 定
25. </view>
26. </view>
27. </view>

index.js：

1. var inputinfo = "";
2. var app = getApp()
3. Page({
4. data: {
5. animationData:"",
6. showModalStatus:false
7. },
8.  
9. onLoad: function () {
10.  
11. },
12. showModal: function () {
13. // 显示遮罩层
14. var animation = wx.createAnimation({
15. duration: 200,
16. timingFunction: "linear",
17. delay: 0
18. })
19. this.animation = animation
20. animation.translateY(300).step()
21. this.setData({
22. animationData: animation.export(),
23. showModalStatus: true
24. })
25. setTimeout(function () {
26. animation.translateY(0).step()
27. this.setData({
28. animationData: animation.export()
29. })
30. }.bind(this), 200)
31. },
32. clickbtn:function(){
33. if(this.data.showModalStatus){
34. this.hideModal();
35. }else{
36. this.showModal();
37. }
38. },
39. hideModal: function () {
40. // 隐藏遮罩层
41. var animation = wx.createAnimation({
42. duration: 200,
43. timingFunction: "linear",
44. delay: 0
45. })
46. this.animation = animation
47. animation.translateY(300).step()
48. this.setData({
49. animationData: animation.export(),
50. })
51. setTimeout(function () {
52. animation.translateY(0).step()
53. this.setData({
54. animationData: animation.export(),
55. showModalStatus: false
56. })
57. }.bind(this), 200)
58. },
59. click_cancel:function(){
60. console.log("点击取消");
61. this.hideModal();
62. },
63. click_ok:function(){
64. console.log("点击了确定===，输入的信息为为==",inputinfo);
65. this.hideModal();
66. },
67. input_content:function(e){
68. console.log(e);
69. inputinfo = e.detail.value;
70. }
71.  
72. })