Toast

提示

toast 用于临时显示某些信息，并且会在数秒后自动消失。这里使用小程序原生 API wx.showToast(OBJECT)来完成。不过有个哥们自己写了一个基于 mpvue框架的一个toast组件，详情请点 mpvue-toast。在mpvue框架中使用wx.showToast(OBJECT)实现如下：

  1. <template>
  2.   <div class="page">
  3.     <div class="weui-btn-area">
  4.       <button class="weui-btn" type="default" @click="openToast">成功提示</button>
  5.       <button class="weui-btn" type="default" @click="openLoading">加载中提示</button>
  6.     </div>
  7.   </div>
  8. </template>
  10. <script>
  11. import base64 from '../../../static/images/base64';
  12. export default {
  13.   data() {
  14.     return {
  15.     }
  16.   },
  17.   methods: {
  18.     openToast() {
  19.       wx.showToast({
  20.         title: '已完成',
  21.         icon: 'success',
  22.         duration: 3000,
  23.         mask: true
  24.       });
  25.     },
  26.     openLoading() {
  27.       wx.showToast({
  28.         title: '数据加载中',
  29.         icon: 'loading',
  30.         duration: 3000,
  31.         mask: true
  32.       });
  33.     }
  34.   }
  35. }
  36. </script>
  38. <style>
  39. page {
  40.   margin-top: 50px;
  41.   padding: 15px;
  42.   box-sizing: border-box;
  43. }
  44. </style>

OBJECT参数 的配置可参考小程序官方文档，这些参数在mpvue框架中完全支持。

效果

toast