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

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

微信小程序 弹窗

首先wxmlERPHHwzmw代码：

&lERPHHwzmwt;view class="myToast" hidden="{{nullHouse}}">暂无有关信息

点击此处

注：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,255http://);

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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。