AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

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

51自学网 http://www.wanshiok.com
微信小程序自定义弹窗,小程序,弹窗,小程序,自定义组件

微信小程序 弹窗

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

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


微信小程序自定义弹窗,小程序,弹窗,小程序,自定义组件  
上一篇:ionic2 tabs 图标自定义实例  下一篇:jQuery实现图片滑动效果