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.
244 lines
7.1 KiB
244 lines
7.1 KiB
<template> |
|
<view class="u-skeleton"> |
|
<view |
|
class="u-skeleton__wrapper" |
|
ref="u-skeleton__wrapper" |
|
v-if="loading" |
|
style="display: flex; flex-direction: row;" |
|
> |
|
<view |
|
class="u-skeleton__wrapper__avatar" |
|
v-if="avatar" |
|
:class="[`u-skeleton__wrapper__avatar--${avatarShape}`, animate && 'animate']" |
|
:style="{ |
|
height: $u.addUnit(avatarSize), |
|
width: $u.addUnit(avatarSize) |
|
}" |
|
></view> |
|
<view |
|
class="u-skeleton__wrapper__content" |
|
ref="u-skeleton__wrapper__content" |
|
style="flex: 1;" |
|
> |
|
<view |
|
class="u-skeleton__wrapper__content__title" |
|
v-if="title" |
|
:style="{ |
|
width: uTitleWidth, |
|
height: $u.addUnit(titleHeight), |
|
}" |
|
:class="[animate && 'animate']" |
|
></view> |
|
<view |
|
class="u-skeleton__wrapper__content__rows" |
|
:class="[animate && 'animate']" |
|
v-for="(item, index) in rowsArray" |
|
:key="index" |
|
:style="{ |
|
width: item.width, |
|
height: item.height, |
|
marginTop: item.marginTop |
|
}" |
|
> |
|
|
|
</view> |
|
</view> |
|
</view> |
|
<slot v-else /> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import props from './props.js'; |
|
// #ifdef APP-NVUE |
|
// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度 |
|
const dom = uni.requireNativePlugin('dom') |
|
const animation = uni.requireNativePlugin('animation') |
|
// #endif |
|
/** |
|
* Skeleton 骨架屏 |
|
* @description 骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。 |
|
* @tutorial https://www.uviewui.com/components/skeleton.html |
|
* @property {Boolean} loading 是否显示骨架占位图，设置为false将会展示子组件内容 (默认 true ) |
|
* @property {Boolean} animate 是否开启动画效果 (默认 true ) |
|
* @property {String | Number} rows 段落占位图行数 (默认 0 ) |
|
* @property {String | Number | Array} rowsWidth 段落占位图的宽度，可以为百分比，数值，带单位字符串等，可通过数组传入指定每个段落行的宽度 (默认 '100%' ) |
|
* @property {String | Number | Array} rowsHeight 段落的高度 (默认 18 ) |
|
* @property {Boolean} title 是否展示标题占位图 (默认 true ) |
|
* @property {String | Number} titleWidth 标题的宽度 (默认 '50%' ) |
|
* @property {String | Number} titleHeight 标题的高度 (默认 18 ) |
|
* @property {Boolean} avatar 是否展示头像占位图 (默认 false ) |
|
* @property {String | Number} avatarSize 头像占位图大小 (默认 32 ) |
|
* @property {String} avatarShape 头像占位图的形状，circle-圆形，square-方形 (默认 'circle' ) |
|
* @example <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search> |
|
*/ |
|
export default { |
|
name: 'u-skeleton', |
|
mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|
data() { |
|
return { |
|
width: 0, |
|
} |
|
}, |
|
watch: { |
|
loading() { |
|
this.getComponentWidth() |
|
} |
|
}, |
|
computed: { |
|
rowsArray() { |
|
if (/%$/.test(this.rowsHeight)) { |
|
uni.$u.error('rowsHeight参数不支持百分比单位') |
|
} |
|
const rows = [] |
|
for (let i = 0; i < this.rows; i++) { |
|
let item = {}, |
|
// 需要预防超出数组边界的情况 |
|
rowWidth = uni.$u.test.array(this.rowsWidth) ? (this.rowsWidth[i] || (i === this.row - 1 ? '70%' : '100%')) : i === |
|
this.rows - 1 ? '70%' : this.rowsWidth, |
|
rowHeight = uni.$u.test.array(this.rowsHeight) ? (this.rowsHeight[i] || '18px') : this.rowsHeight |
|
// 如果有title占位图，第一个段落占位图的外边距需要大一些，如果没有title占位图，第一个段落占位图则无需外边距 |
|
// 之所以需要这么做，是因为weex的无能，以提升性能为借口不支持css的一些伪类 |
|
item.marginTop = !this.title && i === 0 ? 0 : this.title && i === 0 ? '20px' : '12px' |
|
// 如果设置的为百分比的宽度，转换为px值，因为nvue不支持百分比单位 |
|
if (/%$/.test(rowWidth)) { |
|
// 通过parseInt提取出百分比单位中的数值部分，除以100得到百分比的小数值 |
|
item.width = uni.$u.addUnit(this.width * parseInt(rowWidth) / 100) |
|
} else { |
|
item.width = uni.$u.addUnit(rowWidth) |
|
} |
|
item.height = uni.$u.addUnit(rowHeight) |
|
rows.push(item) |
|
} |
|
// console.log(rows); |
|
return rows |
|
}, |
|
uTitleWidth() { |
|
let tWidth = 0 |
|
if (/%$/.test(this.titleWidth)) { |
|
// 通过parseInt提取出百分比单位中的数值部分，除以100得到百分比的小数值 |
|
tWidth = uni.$u.addUnit(this.width * parseInt(this.titleWidth) / 100) |
|
} else { |
|
tWidth = uni.$u.addUnit(this.titleWidth) |
|
} |
|
return uni.$u.addUnit(tWidth) |
|
}, |
|
|
|
}, |
|
mounted() { |
|
this.init() |
|
}, |
|
methods: { |
|
init() { |
|
this.getComponentWidth() |
|
// #ifdef APP-NVUE |
|
this.loading && this.animate && this.setNvueAnimation() |
|
// #endif |
|
}, |
|
async setNvueAnimation() { |
|
// #ifdef APP-NVUE |
|
// 为了让opacity:1的状态保持一定时间，这里做一个延时 |
|
await uni.$u.sleep(500) |
|
const skeleton = this.$refs['u-skeleton__wrapper']; |
|
skeleton && this.loading && this.animate && animation.transition(skeleton, { |
|
styles: { |
|
opacity: 0.5 |
|
}, |
|
duration: 600, |
|
}, () => { |
|
// 这里无需判断是否loading和开启动画状态，因为最终的状态必须达到opacity: 1，否则可能 |
|
// 会停留在opacity: 0.5的状态中 |
|
animation.transition(skeleton, { |
|
styles: { |
|
opacity: 1 |
|
}, |
|
duration: 600, |
|
}, () => { |
|
// 只有在loading中时，才执行动画 |
|
this.loading && this.animate && this.setNvueAnimation() |
|
}) |
|
}) |
|
// #endif |
|
}, |
|
// 获取组件的宽度 |
|
async getComponentWidth() { |
|
// 延时一定时间，以获取dom尺寸 |
|
await uni.$u.sleep(20) |
|
// #ifndef APP-NVUE |
|
this.$uGetRect('.u-skeleton__wrapper__content').then(size => { |
|
this.width = size.width |
|
}) |
|
// #endif |
|
|
|
// #ifdef APP-NVUE |
|
const ref = this.$refs['u-skeleton__wrapper__content'] |
|
ref && dom.getComponentRect(ref, (res) => { |
|
this.width = res.size.width |
|
}) |
|
// #endif |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import "../../libs/css/components.scss"; |
|
|
|
@mixin background { |
|
/* #ifdef APP-NVUE */ |
|
background-color: #F1F2F4; |
|
/* #endif */ |
|
/* #ifndef APP-NVUE */ |
|
background: linear-gradient(90deg, #F1F2F4 25%, #e6e6e6 37%, #F1F2F4 50%); |
|
background-size: 400% 100%; |
|
/* #endif */ |
|
} |
|
|
|
.u-skeleton { |
|
flex: 1; |
|
|
|
&__wrapper { |
|
@include flex(row); |
|
|
|
&__avatar { |
|
@include background; |
|
margin-right: 15px; |
|
|
|
&--circle { |
|
border-radius: 100px; |
|
} |
|
|
|
&--square { |
|
border-radius: 4px; |
|
} |
|
} |
|
|
|
&__content { |
|
flex: 1; |
|
|
|
&__rows, |
|
&__title { |
|
@include background; |
|
border-radius: 3px; |
|
} |
|
} |
|
} |
|
} |
|
|
|
/* #ifndef APP-NVUE */ |
|
.animate { |
|
animation: skeleton 1.8s ease infinite |
|
} |
|
|
|
@keyframes skeleton { |
|
0% { |
|
background-position: 100% 50% |
|
} |
|
|
|
100% { |
|
background-position: 0 50% |
|
} |
|
} |
|
|
|
/* #endif */ |
|
</style>
|
|
|