当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序 弹窗自定义实例代码

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

2019年03月22日  | 移动技术网IT编程  | 我要评论

微信小程序 弹窗

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

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网