微客导航 » 文章资讯 » 微信小程序弹窗自定义实例代码

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

2024-02-28 00:36:04 123

微信小程序弹窗

首先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的执行任务放回任务队列的后面，等待执行。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐

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