微信小程序自定义Toast

作者：Happy__EveryDay，来自授权地址 
实现类似于Android的Toast提示 
效果图：

index.js：

1. var timer;
2. var inputinfo = "";
3. var app = getApp()
4. Page({
5. data: {
6. animationData:"",
7. showModalStatus:false
8. },
9.  
10. onLoad: function () {
11.  
12. },
13. showModal: function () {
14. // 显示遮罩层
15. var animation = wx.createAnimation({
16. duration: 200,
17. timingFunction: "linear",
18. delay: 0
19. })
20. this.animation = animation
21. animation.translateY(200).step()
22. this.setData({
23. animationData: animation.export(),
24. showModalStatus: true
25. })
26. setTimeout(function () {
27. animation.translateY(0).step()
28. this.setData({
29. animationData: animation.export()
30. })
31. }.bind(this), 200)
32. console.log("准备执行");
33. timer = setTimeout(function () {
34. if(this.data.showModalStatus){
35. this.hideModal();
36. console.log("是否执行");
37. }
38. }.bind(this), 3000)
39. },
40. clickbtn:function(){
41. if(this.data.showModalStatus){
42. this.hideModal();
43. }else{
44. this.showModal();
45. }
46. },
47. hideModal: function () {
48. if(timer != null){
49. clearTimeout(timer);
50. timer = null;
51. }
52. // 隐藏遮罩层
53. var animation = wx.createAnimation({
54. duration: 200,
55. timingFunction: "linear",
56. delay: 0
57. })
58. this.animation = animation
59. animation.translateY(200).step()
60. this.setData({
61. animationData: animation.export(),
62. })
63. setTimeout(function () {
64. animation.translateY(0).step()
65. this.setData({
66. animationData: animation.export(),
67. showModalStatus: false
68. })
69. }.bind(this), 200)
70. },
71. })

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="title-view">
8. <view class="toast-view">
9. 要显示的内容
10. </view>
11.  
12. </view>
13. </view>