Explanation of WeChat mini-program development-wx. showToast (OBJECT) usage, wx. showtoastobject

Explanation of small program development-wx. showToast (OBJECT) usage, wx. showtoastobject

Wx. showToast API is used to display the message prompt box.

Let's take a look at the official documentation:

Note: Only "success" and "loading" are supported for the icons"

Sample Code:

Wx. showToast ({title: 'success', icon: 'success', duration: 2000 })

Next we will demonstrate how to use it. First open the web Developer tool, create a quick project, delete useless content on the home page, and retain the following parts.

 

Add two buttons and add click events for colleagues. Add the navigator navigation to the default log page. The Code is as follows:

<Navigator url = ".. /logs "> <button type =" primary "bindtap =" logbtn "> login </button> </navigator> <view class =" br "> </view> <navigator url = ".. /logs "> <button type =" primary "bindtap =" morebtn "> View More </button> </navigator>

The index. js code is as follows:

Logbtn: function () {wx. showToast ({title: 'login successfully', icon: 'success ', duration: 1200})}, morebtn: function () {wx. showToast ({title: 'loading ', icon: 'loading', duration: 1200 })},

To make the test more intuitive, We can insert a view tag in the two buttons so that there is a gap between the two buttons. The wxml code is as follows:

 <view class="br"> </view>

The wxss file code is as follows:

.br{ width: 100%; height: 200rpx;}

The final page style is as follows:

Click login:

 

Click to view more:

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.