WeChat applet pop-up window custom code

This article mainly introduces the relevant information about the custom example code of the WeChat mini program pop-up window. Sometimes when doing development projects, it is necessary to change the components of the original system according to customer needs. Here we will change the pop-up window in the mini program. Friends who need it can refer to

WeChat applet pop-up window

First wxml code:

<view class="myToast" hidden="{{nullHouse}}">暂无有关信息</view>
<view bindtap="clickArea">点击此处</view>　　

Note: hidden attribute is used in places where switching is more frequent.

wxss code to set the pop-up window style:

.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)
 },
})

Note: setTimeout() function is asynchronous. When the computer executes setTimeout, the task is paused and saved first, and continues to be executed without completion. When the conditions are met, the execution task of setTimeout is put back to the back of the task queue and waits for execution.

Implementation of message prompt box in WeChat applet

WeChat applet implements dynamic setting of placeholder prompts Methods for text and button selection/cancel status

The above is the detailed content of WeChat applet pop-up window custom code. For more information, please follow other related articles on the PHP Chinese website!