feat(StarryBackground): 根据微信移动端调整星星和流星参数
针对微信移动端优化性能,调整星星数量、移动速度和流星效果参数
Showing
1 changed file
with
12 additions
and
5 deletions
| ... | @@ -4,6 +4,13 @@ | ... | @@ -4,6 +4,13 @@ |
| 4 | </div> | 4 | </div> |
| 5 | </template> | 5 | </template> |
| 6 | 6 | ||
| 7 | +<script> | ||
| 8 | +import { wxInfo } from '@/utils/tools'; | ||
| 9 | + | ||
| 10 | +const { isMobile, isWeiXin } = wxInfo(); | ||
| 11 | +const isWxMobile = isMobile && isWeiXin; | ||
| 12 | +</script> | ||
| 13 | + | ||
| 7 | <script setup> | 14 | <script setup> |
| 8 | import { ref, onMounted, onUnmounted, computed } from 'vue'; | 15 | import { ref, onMounted, onUnmounted, computed } from 'vue'; |
| 9 | 16 | ||
| ... | @@ -21,7 +28,7 @@ const props = defineProps({ | ... | @@ -21,7 +28,7 @@ const props = defineProps({ |
| 21 | // 星星数量 | 28 | // 星星数量 |
| 22 | starCount: { | 29 | starCount: { |
| 23 | type: Number, | 30 | type: Number, |
| 24 | - default: 500 | 31 | + default: isWxMobile ? 800 : 800 |
| 25 | }, | 32 | }, |
| 26 | // 星星颜色 (RGBA 前缀,例如 '255,255,255') | 33 | // 星星颜色 (RGBA 前缀,例如 '255,255,255') |
| 27 | starColor: { | 34 | starColor: { |
| ... | @@ -31,22 +38,22 @@ const props = defineProps({ | ... | @@ -31,22 +38,22 @@ const props = defineProps({ |
| 31 | // 星星移动速度系数 (值越大移动越快) | 38 | // 星星移动速度系数 (值越大移动越快) |
| 32 | starSpeed: { | 39 | starSpeed: { |
| 33 | type: Number, | 40 | type: Number, |
| 34 | - default: 1 | 41 | + default: isWxMobile ? 1 : 0.1 |
| 35 | }, | 42 | }, |
| 36 | // 流星速度 - 水平分量 (负值向左,正值向右) | 43 | // 流星速度 - 水平分量 (负值向左,正值向右) |
| 37 | meteorVx: { | 44 | meteorVx: { |
| 38 | type: Number, | 45 | type: Number, |
| 39 | - default: -5 | 46 | + default: isWxMobile ? -10 : -2 |
| 40 | }, | 47 | }, |
| 41 | // 流星速度 - 垂直分量 (正值向下) | 48 | // 流星速度 - 垂直分量 (正值向下) |
| 42 | meteorVy: { | 49 | meteorVy: { |
| 43 | type: Number, | 50 | type: Number, |
| 44 | - default: 5 | 51 | + default: isWxMobile ? 10 : 2 |
| 45 | }, | 52 | }, |
| 46 | // 流星拖尾长度系数 (值越大尾巴越长) | 53 | // 流星拖尾长度系数 (值越大尾巴越长) |
| 47 | meteorTrail: { | 54 | meteorTrail: { |
| 48 | type: Number, | 55 | type: Number, |
| 49 | - default: 5 | 56 | + default: isWxMobile ? 4 : 10 |
| 50 | } | 57 | } |
| 51 | }); | 58 | }); |
| 52 | 59 | ... | ... |
-
Please register or login to post a comment