微信小程序 弹窗自定义实例代码
微信小程序弹窗
首先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的执行任务放回任务队列的后面,等待执行。
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!