Toast

提示

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

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

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

效果

toast