微信小程序自定义弹窗

Posted catXiao

tags:

篇首语:本文由小常识网(cha138.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的执行任务放回任务队列的后面,等待执行。

以上是关于微信小程序自定义弹窗的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序封装自定义弹窗

微信小程序自定义弹窗

微信小程序之自定义模态弹窗(带动画)实例

微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

微信小程序之自定义模态弹窗(带动画)实例

微信小程序之自定义模态弹窗(带动画)实例