微信小程序 弹窗自定义的代码

微信小程序 弹窗

首先wxml代码：

<view class="myToast" hidden="{{nullHouse}}">暂无有关信息</view> <view bindtap="clickArea">点击此处</view>　　

注：hidden属性用于切换比较频繁的地方。

wxss代码设置弹窗样式:

.myToast{  width:240rpx;  height:130rpx;  line-height: 130rpx;  margin:80rpx 35%;  border-radius:20rpx;  background-color: rgb(114,113,113);  color:rgb(255,255,255);  font-size: 36rpx;  text-align: center;  position: absolute;  z-index: 100;  opacity: 0.85; }

js:

Page({   data:{   nullHouse:true, //先设置隐藏     },  onLoad:function(options){    // 页面初始化 options为页面跳转所带来的参数  },  onReady:function(){   // 页面渲染完成  },  onShow:function(){   // 页面显示  },  onHide:function(){   // 页面隐藏  },  onUnload:function(){   // 页面关闭  },  clickArea:function(){   var that = this;   this.setData({   nullHouse:false, //弹窗显示   })    setTimeout(function(){   that.data.nullHouse = true, //1秒之后弹窗隐藏    },1000)  }, })

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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

微信小程序的消息提示框的实现

微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法

以上就是微信小程序 弹窗自定义的代码的详细内容，更多内容请关注技术你好其它相关文章！