微信小程序怎么实现自定义弹窗

本篇内容主要讲解“微信小程序怎么实现自定义弹窗”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“微信小程序怎么实现自定义弹窗”吧!

微信小程序 弹窗

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

到此，相信大家对“微信小程序怎么实现自定义弹窗”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！