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

微信小程序 弹窗

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

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

您可能感兴趣的文章:

• 微信小程序使用component自定义toast弹窗效果
• 微信小程序自定义弹窗wcPop插件
• 微信小程序自定义toast弹窗效果的实现代码
• 微信小程序实现自定义picker选择器弹窗内容
• 微信小程序实现自定义modal弹窗封装的方法
• 微信小程序实战之自定义模态弹窗（8）
• 微信小程序自定义弹窗实现详解(可通用）