onLoad.uvue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. <template>
  2. <!-- #ifdef APP -->
  3. <scroll-view style="flex: 1">
  4. <!-- #endif -->
  5. <view class="uni-padding-wrap">
  6. <page-head title="onLoad 生命周期调用 uni api 测试" />
  7. <text v-if="isTrue">v-if with true</text>
  8. <text v-if="isFalse">v-if with false</text>
  9. <text v-show="isTrue">v-show with true</text>
  10. <text v-show="isFalse">v-show with false</text>
  11. <text>msg: {{ msg }}</text>
  12. </view>
  13. <!-- #ifdef APP -->
  14. </scroll-view>
  15. <!-- #endif -->
  16. </template>
  17. <script lang="uts">
  18. export default {
  19. data() {
  20. return {
  21. isTrue: false,
  22. isFalse: true,
  23. msg: 'default msg'
  24. }
  25. },
  26. onLoad(options : OnLoadOptions) {
  27. const type = options['type']
  28. switch (type) {
  29. case 'adjustData':
  30. this.adjustData()
  31. break;
  32. case 'navigateTo':
  33. this.navigateTo()
  34. break;
  35. case 'navigateBack':
  36. this.navigateBack()
  37. break;
  38. case 'redirectTo':
  39. this.redirectTo()
  40. break;
  41. case 'reLaunch':
  42. this.reLaunch()
  43. break;
  44. case 'switchTab':
  45. this.switchTab()
  46. break;
  47. case 'showToast':
  48. this.showToast()
  49. break;
  50. case 'showLoading':
  51. this.showLoading()
  52. break;
  53. case 'showModal':
  54. this.showModal()
  55. break;
  56. case 'showActionSheet':
  57. this.showActionSheet()
  58. break;
  59. }
  60. },
  61. // #ifdef WEB
  62. onUnload() {
  63. // web 端页面销毁前,关闭 modal 和 actionsheet
  64. // @ts-ignore
  65. const modalBtn = document.querySelector('.uni-modal__btn')
  66. if (modalBtn) {
  67. modalBtn.click()
  68. }
  69. // @ts-ignore
  70. const actionSheetBtn = document.querySelector('.uni-actionsheet__action .uni-actionsheet__cell')
  71. if (actionSheetBtn) {
  72. actionSheetBtn.click()
  73. }
  74. },
  75. // #endif
  76. methods: {
  77. adjustData() {
  78. this.isTrue = true
  79. this.isFalse = false
  80. this.msg = 'new msg'
  81. },
  82. navigateTo() {
  83. uni.navigateTo({
  84. url: '/pages/API/navigator/new-page/new-page-3'
  85. })
  86. },
  87. navigateBack() {
  88. uni.navigateBack()
  89. },
  90. redirectTo() {
  91. uni.redirectTo({
  92. url: '/pages/API/navigator/new-page/new-page-3'
  93. })
  94. },
  95. reLaunch() {
  96. uni.reLaunch({
  97. url: '/pages/API/navigator/new-page/new-page-3'
  98. })
  99. },
  100. switchTab() {
  101. uni.switchTab({
  102. url: '/pages/tabBar/component'
  103. })
  104. },
  105. showToast() {
  106. uni.showToast({
  107. title: 'test title',
  108. icon: 'success',
  109. duration: 2000
  110. })
  111. },
  112. showLoading() {
  113. uni.showLoading({
  114. title: 'test title',
  115. })
  116. },
  117. showModal() {
  118. uni.showModal({
  119. title: 'test title',
  120. content: 'test content'
  121. })
  122. },
  123. showActionSheet() {
  124. uni.showActionSheet({
  125. title: 'test title',
  126. itemList: ['1', '2', '3']
  127. })
  128. }
  129. }
  130. }
  131. </script>