微信小程序 弹窗自定义实例代码
微信小程序弹窗
首先wxml代码:
暂无有关信息 点击此处
注:hidden属性用于切换比较频繁的地方。
wxss代码设置弹窗样式:
.myToast{ width:240rpx; height:130rpx; line-height:130rpx; margin:80rpx35%; 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(){ varthat=this; this.setData({ nullHouse:false,//弹窗显示 }) setTimeout(function(){ that.data.nullHouse=true,//1秒之后弹窗隐藏 },1000) }, })
注:setTimeout()函数是异步的,当计算机执行到setTimeout时,此任务先暂停并保存,继续执行后续未完成的任务,当条件满足时,再将setTimeout的执行任务放回任务队列的后面,等待执行。
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!