show-loading.vue 937 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <template>
  2. <view>
  3. <page-head :title="title"></page-head>
  4. <view class="uni-padding-wrap">
  5. <view class="uni-btn-v">
  6. <button class="btn-load" type="primary" @click="showLoading">显示 loading 提示框</button>
  7. <!-- #ifndef MP-ALIPAY -->
  8. <button @click="hideLoading">隐藏 loading 提示框</button>
  9. <!-- #endif -->
  10. </view>
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. export default {
  16. data() {
  17. return {
  18. title: 'loading'
  19. }
  20. },
  21. methods: {
  22. showLoading: function() {
  23. uni.showLoading({
  24. title: 'loading'
  25. });
  26. // #ifdef MP-ALIPAY
  27. this._showTimer && clearTimeout(this._showTimer);
  28. this._showTimer = setTimeout(() => {
  29. this.hideLoading();
  30. }, 3000)
  31. // #endif
  32. },
  33. hideLoading: function() {
  34. uni.hideLoading();
  35. }
  36. }
  37. // #ifdef MP-ALIPAY
  38. ,
  39. onUnload() {
  40. this._showTimer && clearTimeout(this._showTimer);
  41. }
  42. // #endif
  43. }
  44. </script>
  45. <style>
  46. </style>