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

This article Xiaobian introduces in detail for you "WeChat Mini Programs development how to use toast and other pop-up box tips", the content is detailed, the steps are clear, the details are handled properly, I hope this "WeChat Mini Programs development how to use toast and other pop-up box tips" article can help you solve doubts, the following slowly deepen with the editor's ideas, together to learn new knowledge.

Introduction

The toast message prompt box in WeChat Mini Programs has only two effects to display, namely, success and loading, using wx.showToast (OBJECT).

Look at the description of the relevant parameters:

The code is simple:

Wx.showToast ({title: 'success', icon: 'succes', duration: 1000, mask:true})

The mask attribute doesn't seem to work. It is worth noting that the delay time for prompts is limited, up to 10000 milliseconds.

Another function is wx.hideToast (), which is a hidden toast, which is mainly used when displaying load prompts, such as:

Wx.showToast ({title: 'loading', icon: 'loading', duration: 10000}) setTimeout (function () {wx.hideToast ()}, 2000)

The original loading time is 10000 milliseconds, and then it is hidden at 2000 milliseconds. This depends on the specific situation, ha.

The second pop-up window is the modal pop-up window: wx.showModal (OBJECT)

The parameters are as follows:

This is similar to the Dialog in our Android. The effect is as follows:

The code is as follows:

Wx.showModal ({title: 'prompt', content: 'modal pop-up window', success: function (res) {if (res.confirm) {console.log ('user click OK')} else {console.log ('user click cancel'))

The last one is the operation menu: wx.showActionSheet (OBJECT)

We used this function in the last article, so it doesn't hurt to talk about it here.

First, let's take a look at the parameter introduction:

Success has one return parameter:

Official examples are posted directly here:

Wx.showActionSheet ({itemList: ['Aids,' bones,'C'], success: function (res) {console.log (res.tapIndex)}, fail: function (res) {console.log (res.errMsg)}})

Effect picture:

There is a small problem here. After showActionSheet pops up, click cancel or shadow, and after executing fail, you will continue to execute the success function. Of course, there must be a solution here. Success actually has two return parameters. In addition to tapIndex, there is another one, that is, whether cancle,cancle is canceled or not. Return a boolean. After popping up this box, make a judgment in success. If (! res.cancel) {do not cancel the operation}. Of course, you can define it yourself.

Let's look at a custom pop-up window:

Wxml:

{{title}}

Css:

Width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: # 000; opacity: 0.2; overflow: hidden; z-index: 1000; color: # fff;}. Commodity_attr_box {width: 100%; overflow: hidden; position: fixed; bottom: 0; left: 0; z-index: 2000; height: 60px; background: # fff;}. Title {height: 100%; width: 100%; position: fixed; text-align: center; margin-top: 20px: Margin-bottom: 20px;}

Js:

ShowView () {/ / display mask layer var animation = wx.createAnimation ({duration: 200,timingFunction: "linear", delay: 0}) this.animation = animation animation.translateY (300) .step () this.setData ({animationData: animation.export (), showModalStatus: true}) setTimeout (function () {animation.translateY (0). Step () this.setData ({animationData: animation.export ()})} .bind (this), hideModal: function () {this.hideView () }, hideView () {/ / Hidden mask layer var animation = wx.createAnimation ({duration: 200,timingFunction: "linear", delay: 0}) this.animation = animation animation.translateY. Step () this.setData ({animationData: animation.export (),}) setTimeout (function () {animation.translateY (0). Step () this.setData ({animationData: animation.export (), showModalStatus: false})} .bind (this)

Enable animation to do, the effect of leverage, do it yourself.

You can also use action-sheet for layout, as follows:

{{item}} cancel Page ({data: {actionSheetHidden: true, actionSheetItems: items}, actionSheetTap: function (e) {this.setData ({actionSheetHidden:! this.data.actionSheetHidden})}, actionSheetChange: function (e) {this.setData ({actionSheetHidden:! this.data.actionSheetHidden})}}). This article "how to use toast and other pop-up boxes in WeChat Mini Programs's development" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it. If you want to know more about the articles, you are welcome to follow the industry information channel.

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.