Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to realize the custom pop-up window of WeChat Mini Programs". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "WeChat Mini Programs how to achieve a custom pop-up window" bar!

WeChat Mini Programs pop-up window

First, the wxml code:

No relevant information is available. Click here.

Note: the hidden attribute is used to switch places that are more frequent.

The wxss code sets the pop-up style:

.myToast {width:240rpx; height:130rpx; line-height: 130rpx; margin:80rpx 35%; border-radius:20rpx; background-color: rgb (114113113); color:rgb (255255255); font-size: 36rpx; text-align: center; position: absolute; z-index: 100; opacity: 0.85;}

Js:

Page ({data: {nullHouse:true, / / set hidden} first, onLoad:function (options) {/ / parameters brought about by page initialization options for page jump}, onReady:function () {/ / page rendering completed}, onShow:function () {/ / page display}, onHide:function () {/ / page hiding}, onUnload:function () {/ / page closed} ClickArea:function () {var that = this This.setData ({nullHouse:false, / / pop-up window display}) setTimeout (function () {that.data.nullHouse = true, / / 1 second later pop-up window hidden}, 1000)},})

Note: the setTimeout () function is asynchronous. When the computer executes to setTimeout, this task is paused and saved first, and the subsequent unfinished tasks continue to be executed. When the conditions are met, the execution tasks of setTimeout are put back to the back of the task queue and wait for execution.

At this point, I believe you have a deeper understanding of "WeChat Mini Programs how to achieve a custom pop-up window". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.