微信小程序自定义弹窗

首先wxml代码：

1. <view class="myToast" hidden="{{nullHouse}}">暂无有关信息</view>
2. <view bindtap="clickArea">点击此处</view>　　
3. 注：hidden属性用于切换比较频繁的地方。

wxss代码设置弹窗样式:

1. .myToast{
2. width:240rpx;
3. height:130rpx;
4. line-height: 130rpx;
5. margin:80rpx 35%;
6. border-radius:20rpx;
7. background-color: rgb(114,113,113);
8. color:rgb(255,255,255);
9. font-size: 36rpx;
10. text-align: center;
11. position: absolute;
12. z-index: 100;
13. opacity: 0.85;
14. }

js:

1. Page({
2.  
3. data:{
4. nullHouse:true, //先设置隐藏
5. },
6. onLoad:function(options){
7. // 页面初始化 options为页面跳转所带来的参数
8. },
9. onReady:function(){
10. // 页面渲染完成
11. },
12. onShow:function(){
13. // 页面显示
14. },
15. onHide:function(){
16. // 页面隐藏
17. },
18. onUnload:function(){
19. // 页面关闭
20. },
21. clickArea:function(){
22. var that = this;
23. this.setData({
24. nullHouse:false, //弹窗显示
25. })
26. setTimeout(function(){
27. that.data.nullHouse = true, //1秒之后弹窗隐藏
28. },1000)
29. },
30. })

注：setTimeout()函数是异步的，当计算机执行到setTimeout时，此任务先暂停并保存，继续执行后续未完成的任务，当条件满足时，再将setTimeout的执行任务放回任务队列的后面，等待执行。