loading-page.nvue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. <template>
  2. <view class="u-page">
  3. <u-navbar
  4. title="加载页"
  5. @leftClick="navigateBack"
  6. safeAreaInsetTop
  7. fixed
  8. placeholder
  9. ></u-navbar>
  10. <u-gap
  11. bgColor="#fff"
  12. height="20"
  13. ></u-gap>
  14. <u-cell-group>
  15. <u-cell
  16. :titleStyle="{fontWeight: 500}"
  17. @click="openLoadingPage(index)"
  18. :title="item.title"
  19. v-for="(item, index) in list"
  20. :key="index"
  21. isLink
  22. >
  23. <image
  24. slot="icon"
  25. class="u-cell-icon"
  26. :src="item.iconUrl"
  27. mode="widthFix"
  28. ></image>
  29. </u-cell>
  30. </u-cell-group>
  31. <u-loading-page
  32. :loadingText="loadingPageData.loadingText"
  33. :image="loadingPageData.image"
  34. :iconSize="loadingPageData.iconSize"
  35. :loadingMode="loadingPageData.loadingMode"
  36. :bgColor="loadingPageData.bgColor"
  37. :loading="loading"
  38. :color="loadingPageData.color"
  39. :loadingColor="loadingPageData.loadingColor"
  40. >
  41. </u-loading-page>
  42. </view>
  43. </template>
  44. <script>
  45. export default {
  46. data() {
  47. return {
  48. loading: false,
  49. loadingPageData: {
  50. // 自定义提示内容
  51. loadingText: '',
  52. // 自定义图片
  53. image: '',
  54. // 自定义加载动画模式
  55. loadingMode: '',
  56. // 自定义背景色
  57. bgColor: '#ffffff',
  58. },
  59. list: [{
  60. title: '自定义提示内容',
  61. iconUrl: 'https://cdn.uviewui.com/uview/demo/loading-page/promptContent.png',
  62. },
  63. {
  64. title: '自定义图片',
  65. iconUrl: 'https://cdn.uviewui.com/uview/demo/loading-page/customPicture.png',
  66. },
  67. {
  68. title: '自定义加载动画模式',
  69. iconUrl: 'https://cdn.uviewui.com/uview/demo/loading-page/customMode.png',
  70. },
  71. {
  72. title: '自定义背景色',
  73. iconUrl: 'https://cdn.uviewui.com/uview/demo/loading-page/customBgColor.png',
  74. },
  75. ]
  76. }
  77. },
  78. methods: {
  79. navigateBack() {
  80. uni.navigateBack()
  81. },
  82. openLoadingPage(indexNum) {
  83. this.loadingPageData = {
  84. loadingText: '',
  85. image: '',
  86. loadingMode: '',
  87. bgColor: '#ffffff',
  88. iconSize: 28
  89. }
  90. if (indexNum == 0) {
  91. //自定义提示内容
  92. this.loadingPageData.loadingMode = 'semicircle'
  93. this.loadingPageData.loadingText = "Hello uView"
  94. this.loadingPageData.color = '#C8C8C8'
  95. this.loadingPageData.loadingColor = '#C8C8C8'
  96. } else if (indexNum == 1) {
  97. // 自定义图片
  98. this.loadingPageData.image = "/static/uview/common/logo.png"
  99. this.loadingPageData.loadingText = "uView UI"
  100. this.loadingPageData.iconSize = 40
  101. this.loadingPageData.color = '#C8C8C8'
  102. this.loadingPageData.loadingColor = '#C8C8C8'
  103. } else if (indexNum == 2) {
  104. // 自定义加载动画模式
  105. this.loadingPageData.loadingMode = 'circle'
  106. this.loadingPageData.loadingText = "uView UI"
  107. this.loadingPageData.color = '#C8C8C8'
  108. this.loadingPageData.loadingColor = '#C8C8C8'
  109. } else if (indexNum == 3) {
  110. // 自定义背景色
  111. this.loadingPageData.loadingMode = 'spinner'
  112. this.loadingPageData.bgColor = 'rgba(0, 0, 0, 0.3)'
  113. this.loadingPageData.loadingText = "uView UI"
  114. this.loadingPageData.color = '#eee'
  115. this.loadingPageData.loadingColor = '#ddd'
  116. }
  117. this.loading = true
  118. setTimeout(() => {
  119. this.loading = false
  120. }, 2000)
  121. }
  122. }
  123. }
  124. </script>
  125. <style lang="scss">
  126. .u-page {
  127. padding: 0;
  128. }
  129. </style>