You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

343 lines
11 KiB

9 months ago
  1. <template>
  2. <view
  3. class="u-loading-icon"
  4. :style="[$u.addStyle(customStyle)]"
  5. :class="[vertical && 'u-loading-icon--vertical']"
  6. v-if="show"
  7. >
  8. <view
  9. v-if="!webviewHide"
  10. class="u-loading-icon__spinner"
  11. :class="[`u-loading-icon__spinner--${mode}`]"
  12. ref="ani"
  13. :style="{
  14. color: color,
  15. width: $u.addUnit(size),
  16. height: $u.addUnit(size),
  17. borderTopColor: color,
  18. borderBottomColor: otherBorderColor,
  19. borderLeftColor: otherBorderColor,
  20. borderRightColor: otherBorderColor,
  21. 'animation-duration': `${duration}ms`,
  22. 'animation-timing-function': mode === 'semicircle' || mode === 'circle' ? timingFunction : ''
  23. }"
  24. >
  25. <block v-if="mode === 'spinner'">
  26. <!-- #ifndef APP-NVUE -->
  27. <view
  28. v-for="(item, index) in array12"
  29. :key="index"
  30. class="u-loading-icon__dot"
  31. >
  32. </view>
  33. <!-- #endif -->
  34. <!-- #ifdef APP-NVUE -->
  35. <!-- 此组件内部图标部分无法设置宽高即使通过width和height配置了也无效 -->
  36. <loading-indicator
  37. v-if="!webviewHide"
  38. class="u-loading-indicator"
  39. :animating="true"
  40. :style="{
  41. color: color,
  42. width: $u.addUnit(size),
  43. height: $u.addUnit(size)
  44. }"
  45. />
  46. <!-- #endif -->
  47. </block>
  48. </view>
  49. <text
  50. v-if="text"
  51. class="u-loading-icon__text"
  52. :style="{
  53. fontSize: $u.addUnit(textSize),
  54. color: textColor,
  55. }"
  56. >{{text}}</text>
  57. </view>
  58. </template>
  59. <script>
  60. import props from './props.js';
  61. // #ifdef APP-NVUE
  62. const animation = weex.requireModule('animation');
  63. // #endif
  64. /**
  65. * loading 加载动画
  66. * @description 警此组件为一个小动画目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景
  67. * @tutorial https://www.uviewui.com/components/loading.html
  68. * @property {Boolean} show 是否显示组件 (默认 true)
  69. * @property {String} color 动画活动区域的颜色只对 mode = flower 模式有效默认color['u-tips-color']
  70. * @property {String} textColor 提示文本的颜色默认color['u-tips-color']
  71. * @property {Boolean} vertical 文字和图标是否垂直排列 (默认 false )
  72. * @property {String} mode 模式选择见官网说明默认 'circle'
  73. * @property {String | Number} size 加载图标的大小单位px 默认 24
  74. * @property {String | Number} textSize 文字大小默认 15
  75. * @property {String | Number} text 文字内容
  76. * @property {String} timingFunction 动画模式 默认 'ease-in-out'
  77. * @property {String | Number} duration 动画执行周期时间默认 1200
  78. * @property {String} inactiveColor mode=circle时的暗边颜色
  79. * @property {Object} customStyle 定义需要用到的外部样式
  80. * @example <u-loading mode="circle"></u-loading>
  81. */
  82. export default {
  83. name: 'u-loading-icon',
  84. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  85. data() {
  86. return {
  87. // Array.form可以通过一个伪数组对象创建指定长度的数组
  88. // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from
  89. array12: Array.from({
  90. length: 12
  91. }),
  92. // 这里需要设置默认值为360,否则在安卓nvue上,会延迟一个duration周期后才执行
  93. // 在iOS nvue上,则会一开始默认执行两个周期的动画
  94. aniAngel: 360, // 动画旋转角度
  95. webviewHide: false, // 监听webview的状态,如果隐藏了页面,则停止动画,以免性能消耗
  96. loading: false, // 是否运行中,针对nvue使用
  97. }
  98. },
  99. computed: {
  100. // 当为circle类型时,给其另外三边设置一个更轻一些的颜色
  101. // 之所以需要这么做的原因是,比如父组件传了color为红色,那么需要另外的三个边为浅红色
  102. // 而不能是固定的某一个其他颜色(因为这个固定的颜色可能浅蓝,导致效果没有那么细腻良好)
  103. otherBorderColor() {
  104. const lightColor = uni.$u.colorGradient(this.color, '#ffffff', 100)[80]
  105. if (this.mode === 'circle') {
  106. return this.inactiveColor ? this.inactiveColor : lightColor
  107. } else {
  108. return 'transparent'
  109. }
  110. // return this.mode === 'circle' ? this.inactiveColor ? this.inactiveColor : lightColor : 'transparent'
  111. }
  112. },
  113. watch: {
  114. show(n) {
  115. // nvue中,show为true,且为非loading状态,就重新执行动画模块
  116. // #ifdef APP-NVUE
  117. if (n && !this.loading) {
  118. setTimeout(() => {
  119. this.startAnimate()
  120. }, 30)
  121. }
  122. // #endif
  123. }
  124. },
  125. mounted() {
  126. this.init()
  127. },
  128. methods: {
  129. init() {
  130. setTimeout(() => {
  131. // #ifdef APP-NVUE
  132. this.show && this.nvueAnimate()
  133. // #endif
  134. // #ifdef APP-PLUS
  135. this.show && this.addEventListenerToWebview()
  136. // #endif
  137. }, 20)
  138. },
  139. // 监听webview的显示与隐藏
  140. addEventListenerToWebview() {
  141. // webview的堆栈
  142. const pages = getCurrentPages()
  143. // 当前页面
  144. const page = pages[pages.length - 1]
  145. // 当前页面的webview实例
  146. const currentWebview = page.$getAppWebview()
  147. // 监听webview的显示与隐藏,从而停止或者开始动画(为了性能)
  148. currentWebview.addEventListener('hide', () => {
  149. this.webviewHide = true
  150. })
  151. currentWebview.addEventListener('show', () => {
  152. this.webviewHide = false
  153. })
  154. },
  155. // #ifdef APP-NVUE
  156. nvueAnimate() {
  157. // nvue下,非spinner类型时才需要旋转,因为nvue的spinner类型,使用了weex的
  158. // loading-indicator组件,自带旋转功能
  159. this.mode !== 'spinner' && this.startAnimate()
  160. },
  161. // 执行nvue的animate模块动画
  162. startAnimate() {
  163. this.loading = true
  164. const ani = this.$refs.ani
  165. if (!ani) return
  166. animation.transition(ani, {
  167. // 进行角度旋转
  168. styles: {
  169. transform: `rotate(${this.aniAngel}deg)`,
  170. transformOrigin: 'center center'
  171. },
  172. duration: this.duration,
  173. timingFunction: this.timingFunction,
  174. // delay: 10
  175. }, () => {
  176. // 每次增加360deg,为了让其重新旋转一周
  177. this.aniAngel += 360
  178. // 动画结束后,继续循环执行动画,需要同时判断webviewHide变量
  179. // nvue安卓,页面隐藏后依然会继续执行startAnimate方法
  180. this.show && !this.webviewHide ? this.startAnimate() : this.loading = false
  181. })
  182. }
  183. // #endif
  184. }
  185. }
  186. </script>
  187. <style lang="scss" scoped>
  188. @import "../../libs/css/components.scss";
  189. $u-loading-icon-color: #c8c9cc !default;
  190. $u-loading-icon-text-margin-left:4px !default;
  191. $u-loading-icon-text-color:$u-content-color !default;
  192. $u-loading-icon-text-font-size:14px !default;
  193. $u-loading-icon-text-line-height:20px !default;
  194. $u-loading-width:30px !default;
  195. $u-loading-height:30px !default;
  196. $u-loading-max-width:100% !default;
  197. $u-loading-max-height:100% !default;
  198. $u-loading-semicircle-border-width: 2px !default;
  199. $u-loading-semicircle-border-color:transparent !default;
  200. $u-loading-semicircle-border-top-right-radius: 100px !default;
  201. $u-loading-semicircle-border-top-left-radius: 100px !default;
  202. $u-loading-semicircle-border-bottom-left-radius: 100px !default;
  203. $u-loading-semicircle-border-bottom-right-radiu: 100px !default;
  204. $u-loading-semicircle-border-style: solid !default;
  205. $u-loading-circle-border-top-right-radius: 100px !default;
  206. $u-loading-circle-border-top-left-radius: 100px !default;
  207. $u-loading-circle-border-bottom-left-radius: 100px !default;
  208. $u-loading-circle-border-bottom-right-radiu: 100px !default;
  209. $u-loading-circle-border-width:2px !default;
  210. $u-loading-circle-border-top-color:#e5e5e5 !default;
  211. $u-loading-circle-border-right-color:$u-loading-circle-border-top-color !default;
  212. $u-loading-circle-border-bottom-color:$u-loading-circle-border-top-color !default;
  213. $u-loading-circle-border-left-color:$u-loading-circle-border-top-color !default;
  214. $u-loading-circle-border-style:solid !default;
  215. $u-loading-icon-host-font-size:0px !default;
  216. $u-loading-icon-host-line-height:1 !default;
  217. $u-loading-icon-vertical-margin:6px 0 0 !default;
  218. $u-loading-icon-dot-top:0 !default;
  219. $u-loading-icon-dot-left:0 !default;
  220. $u-loading-icon-dot-width:100% !default;
  221. $u-loading-icon-dot-height:100% !default;
  222. $u-loading-icon-dot-before-width:2px !default;
  223. $u-loading-icon-dot-before-height:25% !default;
  224. $u-loading-icon-dot-before-margin:0 auto !default;
  225. $u-loading-icon-dot-before-background-color:currentColor !default;
  226. $u-loading-icon-dot-before-border-radius:40% !default;
  227. .u-loading-icon {
  228. /* #ifndef APP-NVUE */
  229. // display: inline-flex;
  230. /* #endif */
  231. flex-direction: row;
  232. align-items: center;
  233. justify-content: center;
  234. color: $u-loading-icon-color;
  235. &__text {
  236. margin-left: $u-loading-icon-text-margin-left;
  237. color: $u-loading-icon-text-color;
  238. font-size: $u-loading-icon-text-font-size;
  239. line-height: $u-loading-icon-text-line-height;
  240. }
  241. &__spinner {
  242. width: $u-loading-width;
  243. height: $u-loading-height;
  244. position: relative;
  245. /* #ifndef APP-NVUE */
  246. box-sizing: border-box;
  247. max-width: $u-loading-max-width;
  248. max-height: $u-loading-max-height;
  249. animation: u-rotate 1s linear infinite;
  250. /* #endif */
  251. }
  252. &__spinner--semicircle {
  253. border-width: $u-loading-semicircle-border-width;
  254. border-color: $u-loading-semicircle-border-color;
  255. border-top-right-radius: $u-loading-semicircle-border-top-right-radius;
  256. border-top-left-radius: $u-loading-semicircle-border-top-left-radius;
  257. border-bottom-left-radius: $u-loading-semicircle-border-bottom-left-radius;
  258. border-bottom-right-radius: $u-loading-semicircle-border-bottom-right-radiu;
  259. border-style: $u-loading-semicircle-border-style;
  260. }
  261. &__spinner--circle {
  262. border-top-right-radius: $u-loading-circle-border-top-right-radius;
  263. border-top-left-radius: $u-loading-circle-border-top-left-radius;
  264. border-bottom-left-radius: $u-loading-circle-border-bottom-left-radius;
  265. border-bottom-right-radius: $u-loading-circle-border-bottom-right-radiu;
  266. border-width: $u-loading-circle-border-width;
  267. border-top-color: $u-loading-circle-border-top-color;
  268. border-right-color: $u-loading-circle-border-right-color;
  269. border-bottom-color: $u-loading-circle-border-bottom-color;
  270. border-left-color: $u-loading-circle-border-left-color;
  271. border-style: $u-loading-circle-border-style;
  272. }
  273. &--vertical {
  274. flex-direction: column
  275. }
  276. }
  277. /* #ifndef APP-NVUE */
  278. :host {
  279. font-size: $u-loading-icon-host-font-size;
  280. line-height: $u-loading-icon-host-line-height;
  281. }
  282. .u-loading-icon {
  283. &__spinner--spinner {
  284. animation-timing-function: steps(12)
  285. }
  286. &__text:empty {
  287. display: none
  288. }
  289. &--vertical &__text {
  290. margin: $u-loading-icon-vertical-margin;
  291. color: $u-content-color;
  292. }
  293. &__dot {
  294. position: absolute;
  295. top: $u-loading-icon-dot-top;
  296. left: $u-loading-icon-dot-left;
  297. width: $u-loading-icon-dot-width;
  298. height: $u-loading-icon-dot-height;
  299. &:before {
  300. display: block;
  301. width: $u-loading-icon-dot-before-width;
  302. height: $u-loading-icon-dot-before-height;
  303. margin: $u-loading-icon-dot-before-margin;
  304. background-color: $u-loading-icon-dot-before-background-color;
  305. border-radius: $u-loading-icon-dot-before-border-radius;
  306. content: " "
  307. }
  308. }
  309. }
  310. @for $i from 1 through 12 {
  311. .u-loading-icon__dot:nth-of-type(#{$i}) {
  312. transform: rotate($i * 30deg);
  313. opacity: 1 - 0.0625 * ($i - 1);
  314. }
  315. }
  316. @keyframes u-rotate {
  317. 0% {
  318. transform: rotate(0deg)
  319. }
  320. to {
  321. transform: rotate(1turn)
  322. }
  323. }
  324. /* #endif */
  325. </style>