这篇文章主要介绍了微信小程序 弹窗自定义实例代码的相关资料,有时候做开发项目的时候需要根据客户需求更改原系统的组件，这里就对小程序中弹窗进行更改，需要的朋友可以参考下
微信小程序 弹窗
首先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中文网！
相关推荐：
以上就是微信小程序 弹窗自定义的代码的详细内容，更多请关注有卡有网。
