85 lines
1.8 KiB
Vue
85 lines
1.8 KiB
Vue
|
<template>
|
|||
|
|
<!-- 首屏骨架：形状跟页面走，动画吃 effect.skeleton -->
|
|||
|
|
<view class="sk" :class="'sk--' + mode">
|
|||
|
|
<view
|
|||
|
|
v-for="n in bars"
|
|||
|
|
:key="n"
|
|||
|
|
class="sk-bar"
|
|||
|
|
:style="barStyle(n)"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { getActiveLayout, getActiveVars } from '@/utils/theme'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'ThemeSkeleton',
|
|||
|
|
props: {
|
|||
|
|
/** home | catalog | product | cart | mine */
|
|||
|
|
page: { type: String, default: 'catalog' },
|
|||
|
|
count: { type: Number, default: 0 },
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
mode() {
|
|||
|
|
const effect = (getActiveLayout().effect) || {}
|
|||
|
|
return effect.skeleton || 'shimmer'
|
|||
|
|
},
|
|||
|
|
vars() {
|
|||
|
|
return getActiveVars()
|
|||
|
|
},
|
|||
|
|
bars() {
|
|||
|
|
if (this.count > 0) return this.count
|
|||
|
|
const map = { home: 6, catalog: 6, product: 4, cart: 3, mine: 3 }
|
|||
|
|
return map[this.page] || 4
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
barStyle(n) {
|
|||
|
|
const soft = this.vars['--color-surface-soft'] || this.vars['--color-border'] || '#E7DFD3'
|
|||
|
|
const tall = this.page === 'catalog' && n % 2 === 0
|
|||
|
|
return {
|
|||
|
|
background: soft,
|
|||
|
|
height: tall ? '300rpx' : (n === 1 && this.page === 'home' ? '240rpx' : '80rpx'),
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.sk {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
padding: 16rpx;
|
|||
|
|
}
|
|||
|
|
.sk-bar {
|
|||
|
|
width: 100%;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
}
|
|||
|
|
.sk--catalog .sk-bar {
|
|||
|
|
width: calc(50% - 8rpx);
|
|||
|
|
}
|
|||
|
|
.sk--shimmer .sk-bar {
|
|||
|
|
background-size: 200% 100%;
|
|||
|
|
animation: sk-shimmer 1.6s linear infinite;
|
|||
|
|
}
|
|||
|
|
.sk--pulse .sk-bar {
|
|||
|
|
animation: sk-pulse 1.8s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
.sk--none .sk-bar {
|
|||
|
|
animation: none;
|
|||
|
|
opacity: 0.55;
|
|||
|
|
}
|
|||
|
|
@keyframes sk-shimmer {
|
|||
|
|
0% { opacity: 0.55; }
|
|||
|
|
50% { opacity: 0.95; }
|
|||
|
|
100% { opacity: 0.55; }
|
|||
|
|
}
|
|||
|
|
@keyframes sk-pulse {
|
|||
|
|
0%, 100% { opacity: 0.55; }
|
|||
|
|
50% { opacity: 1; }
|
|||
|
|
}
|
|||
|
|
</style>
|