欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

小程序极速实战开发《十九》toast显示消息提示

发布：2018-01-25 16:28浏览： 次来源：网络 作者：tianshu

组件说明:

Toast是当用户点击某些组件时弹出来来的提示消息。Toast会帮助你创建和显示这些消息。Toast是一种简易的消息提示框。当视图显示给用户，在应用程序中显示为浮动。小程序即将废弃Toast组件，故这里介绍Toast的API：wx.showToast

 

组件用法：

小程序极速实战开发《十九》toast显示消息提示(图1)

 

 


wxml

  1. <!--index.wxml-->
  2. <view class="content">
  3.   <text class="showfunc">Toast功能</text>
  4.   <view class="con-button">
  5.     <button class="button-left" bindtap="showToast">展示Toast</button>
  6.     <button class="button-right" bindtap="hideToast">隐藏Toast</button>
  7.   </view>
  8. </view>

js

  1. Page({
  2.   showToast:function(){
  3.     var that=this;
  4.     wx.showToast({
  5.       title: '成功',
  6.       icon: 'success',
  7.       duration: 2000,
  8.       success: that.flySuccess,
  9.       fail:that.flyFail,
  10.       complete:that.flyComplete
  11.     })
  12.   },
  13.   hideToast:function(){
  14.     var that=this;
  15.     wx.showToast({
  16.       title: '加载中',
  17.       icon: 'loading',
  18.       duration: 10000,
  19.       success: that.loadingSuccess,
  20.       fail:that.loadingFail,
  21.       complete:that.loadingComplete
  22.     });
  23.     setTimeout(function(){
  24.       wx.hideToast()
  25.     },2000)
  26.   },
  27.   flySuccess:function(e){
  28.     console.log(e);
  29.     console.log("起飞成功！");
  30.   },
  31.   flyFail:function(e){
  32.     console.log(e);
  33.     console.log("起飞失败！")
  34.   },
  35.   flyComplete:function(e){
  36.     console.log(e);
  37.     console.log("起飞结束！")
  38.   },
  39.   loadingSuccess:function(e){
  40.     console.log(e);
  41.     console.log("加载成功！");
  42.   },
  43.   loadingFail:function(e){
  44.     console.log(e);
  45.     console.log("加载失败！")
  46.   },
  47.   loadingComplete:function(e){
  48.     console.log(e);
  49.     console.log("加载结束！")
  50.   }
  51. })

wxss

  1. /**index.wxss**/
  2. .con-button{
  3.   display: flex;
  4.   flex-direction: row;
  5.   padding-top: 10%;
  6. }
  7. .showfunc{
  8.   padding-top:10%;
  9.   display: block;
  10.   text-align: center;
  11.   color: green;
  12. }

主要参数：
参数
类型
是否必填
参数描述
title String 是 该提示框提示的内容
icon String 否 该提示框的图标，只支持”success”、”loading”
duration Number 否 提示的延迟时间，单位毫秒，默认：1500, 最大为10000
success Function 否 该接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）





免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有