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

微信小程序 弹窗

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:主机域名网站空间、营销软件、网站建设、东乡网站维护、网站推广。

首先wxml代码:


点击此处  

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

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


名称栏目:微信小程序弹窗自定义实例代码
文章链接:http://ybzwz.com/article/gipcds.html