countTo.nvue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">基础功能</text>
  5. <view class="u-demo-block__content">
  6. <view class="u-page__tag-item">
  7. <u-count-to
  8. :endVal="value"
  9. @end="end"
  10. ></u-count-to>
  11. </view>
  12. </view>
  13. </view>
  14. <view class="u-demo-block">
  15. <text class="u-demo-block__title">倒计数</text>
  16. <view class="u-demo-block__content">
  17. <view class="u-page__tag-item">
  18. <u-count-to :startVal="startVal1"></u-count-to>
  19. </view>
  20. </view>
  21. </view>
  22. <view class="u-demo-block">
  23. <text class="u-demo-block__title">显示小数位</text>
  24. <view class="u-demo-block__content">
  25. <view class="u-page__tag-item">
  26. <u-count-to
  27. :startVal="startVal2"
  28. :endVal="endVal"
  29. :decimals="decimals"
  30. ></u-count-to>
  31. </view>
  32. </view>
  33. </view>
  34. <view class="u-demo-block">
  35. <text class="u-demo-block__title">千分位分隔符</text>
  36. <view class="u-demo-block__content">
  37. <view class="u-page__tag-item">
  38. <u-count-to
  39. :startVal="startVal3"
  40. :endVal="endVal2"
  41. separator=","
  42. :decimals="decimals"
  43. ></u-count-to>
  44. </view>
  45. </view>
  46. </view>
  47. <view class="u-demo-block">
  48. <text class="u-demo-block__title">自定义控制</text>
  49. <view class="u-demo-block__content">
  50. <view class="u-page__tag-item">
  51. <u-count-to
  52. ref="uCountTo"
  53. :endVal="endVal3"
  54. :autoplay="autoplay"
  55. ></u-count-to>
  56. </view>
  57. </view>
  58. <view class="u-demo-block__content">
  59. <view
  60. class=""
  61. style="flex: 1;"
  62. >
  63. <u-grid
  64. border
  65. align="center"
  66. customStyle="margin-top: 20px;margin-bottom: 20"
  67. >
  68. <u-grid-item @click="start">
  69. <view class="u-grid-slot">
  70. <view class="u-grid-slot__circle">
  71. <text class="u-grid-slot__circle__text">开始</text>
  72. </view>
  73. </view>
  74. </u-grid-item>
  75. <u-grid-item @click="paused">
  76. <view class="u-grid-slot">
  77. <view class="u-grid-slot__circle">
  78. <text class="u-grid-slot__circle__text">暂停</text>
  79. </view>
  80. </view>
  81. </u-grid-item>
  82. <u-grid-item @click="resume">
  83. <view class="u-grid-slot">
  84. <view class="u-grid-slot__circle">
  85. <text class="u-grid-slot__circle__text">继续</text>
  86. </view>
  87. </view>
  88. </u-grid-item>
  89. </u-grid>
  90. </view>
  91. </view>
  92. </view>
  93. <view class="u-demo-block">
  94. <text class="u-demo-block__title">自定义</text>
  95. <view class="u-demo-block__content">
  96. <view class="u-page__tag-item">
  97. <u-count-to
  98. :endVal="value"
  99. color="#909399"
  100. :fontSize="fontSize"
  101. :bold="true"
  102. ></u-count-to>
  103. </view>
  104. </view>
  105. </view>
  106. </view>
  107. </template>
  108. <script>
  109. export default {
  110. data() {
  111. return {
  112. value: 3000,
  113. startVal1: 300,
  114. startVal2: 100.00,
  115. endVal: 10.55,
  116. decimals: 2,
  117. startVal3: 2000,
  118. endVal2: 1542,
  119. endVal3: 3000,
  120. autoplay: false,
  121. color: '#FF0000',
  122. fontSize: 40,
  123. }
  124. },
  125. onLoad() {
  126. // setTimeout(() => {
  127. // this.value = 3000
  128. // }, 3000)
  129. },
  130. methods: {
  131. start() {
  132. this.$refs.uCountTo.start();
  133. },
  134. paused() {
  135. this.$refs.uCountTo.stop()
  136. },
  137. resume() {
  138. this.$refs.uCountTo.resume()
  139. },
  140. end() {
  141. console.log('end');
  142. }
  143. }
  144. }
  145. </script>
  146. <style lang="scss">
  147. .u-demo-block__content {
  148. flex-direction: row;
  149. flex-wrap: wrap;
  150. align-items: center;
  151. }
  152. .u-grid-slot {
  153. border-radius: 100px;
  154. border-color: #dbfbdb;
  155. border-width: 2px;
  156. @include flex;
  157. &__circle {
  158. width: 50px;
  159. height: 50px;
  160. background-color: #dbfbdb;
  161. border-radius: 100px;
  162. justify-content: center;
  163. align-items: center;
  164. margin: 2px;
  165. &__text {
  166. color: rgb(25, 190, 107);
  167. font-size: 13px;
  168. }
  169. }
  170. }
  171. </style>