更新大理市民卡app
diff --git a/uview-ui/components/u-skeleton/u-skeleton.vue b/uview-ui/components/u-skeleton/u-skeleton.vue
new file mode 100644
index 0000000..c8cb19e
--- /dev/null
+++ b/uview-ui/components/u-skeleton/u-skeleton.vue
@@ -0,0 +1,199 @@
+<template>
+ <view v-if="loading" :style="{
+ width: windowWinth + 'px',
+ height: windowHeight + 'px',
+ backgroundColor: bgColor,
+ position: 'absolute',
+ left: left + 'px',
+ top: top + 'px',
+ zIndex: 9998,
+ overflow: 'hidden'
+ }"
+ @touchmove.stop.prevent>
+ <view v-for="(item, index) in RectNodes" :key="$u.guid()" :class="[animation ? 'skeleton-fade' : '']" :style="{
+ width: item.width + 'px',
+ height: item.height + 'px',
+ backgroundColor: elColor,
+ position: 'absolute',
+ left: (item.left - left) + 'px',
+ top: (item.top - top) + 'px'
+ }"></view>
+ <view v-for="(item, index) in circleNodes" :key="$u.guid()" :class="animation ? 'skeleton-fade' : ''" :style="{
+ width: item.width + 'px',
+ height: item.height + 'px',
+ backgroundColor: elColor,
+ borderRadius: item.width/2 + 'px',
+ position: 'absolute',
+ left: (item.left - left) + 'px',
+ top: (item.top - top) + 'px'
+ }"></view>
+ <view v-for="(item, index) in filletNodes" :key="$u.guid()" :class="animation ? 'skeleton-fade' : ''" :style="{
+ width: item.width + 'px',
+ height: item.height + 'px',
+ backgroundColor: elColor,
+ borderRadius: borderRadius + 'rpx',
+ position: 'absolute',
+ left: (item.left - left) + 'px',
+ top: (item.top - top) + 'px'
+ }"></view>
+ </view>
+</template>
+
+<script>
+ /**
+ * skeleton 骨架屏
+ * @description 骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。
+ * @tutorial https://www.uviewui.com/components/skeleton.html
+ * @property {String} el-color 骨架块状元素的背景颜色（默认#e5e5e5）
+ * @property {String} bg-color 骨架组件背景颜色（默认#ffffff）
+ * @property {Boolean} animation 骨架块是否显示动画效果（默认false）
+ * @property {String Number} border-radius u-skeleton-fillet类名元素，对应的骨架块的圆角大小，单位rpx（默认10）
+ * @property {Boolean} loading 是否显示骨架组件，请求完成后，将此值设置为false（默认true）
+ * @example <u-skeleton :loading="true" :animation="true"></u-skeleton>
+ */
+ export default {
+ name: "u-skeleton",
+ props: {
+ // 需要渲染的元素背景颜色，十六进制或者rgb等都可以
+ elColor: {
+ type: String,
+ default: '#e5e5e5'
+ },
+ // 整个骨架屏页面的背景颜色
+ bgColor: {
+ type: String,
+ default: '#ffffff'
+ },
+ // 是否显示加载动画
+ animation: {
+ type: Boolean,
+ default: false
+ },
+ // 圆角值，只对类名为u-skeleton-fillet的元素生效，为数值，不带单位
+ borderRadius: {
+ type: [String, Number],
+ default: "10"
+ },
+ // 是否显示骨架，true-显示，false-隐藏
+ loading: {
+ type: Boolean,
+ default: true
+ }
+ },
+ data() {
+ return {
+ windowWinth: 750, // 骨架屏宽度
+ windowHeight: 1500, // 骨架屏高度
+ filletNodes: [], // 圆角元素
+ circleNodes: [], // 圆形元素
+ RectNodes: [], // 矩形元素
+ top: 0,
+ left: 0,
+ }
+ },
+ methods: {
+ // 查询各节点的信息
+ selecterQueryInfo() {
+ // 获取整个父组件容器的高度，当做骨架屏的高度
+ // 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效
+ let query = '';
+ // #ifdef MP-WEIXIN
+ query = uni.createSelectorQuery().in(this.$parent);
+ // #endif
+ // #ifndef MP-WEIXIN
+ query = uni.createSelectorQuery()
+ // #endif
+ query.selectAll('.u-skeleton').boundingClientRect().exec((res) => {
+ this.windowHeight = res[0][0].height;
+ this.windowWinth = res[0][0].width;
+ this.top = res[0][0].bottom - res[0][0].height;
+ this.left = res[0][0].left;
+ });
+ // 矩形骨架元素
+ this.getRectEls();
+ // 圆形骨架元素
+ this.getCircleEls();
+ // 圆角骨架元素
+ this.getFilletEls();
+ },
+ // 矩形元素列表
+ getRectEls() {
+ let query = '';
+ // 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效
+ // #ifdef MP-WEIXIN
+ query = uni.createSelectorQuery().in(this.$parent);
+ // #endif
+ // #ifndef MP-WEIXIN
+ query = uni.createSelectorQuery()
+ // #endif
+ query.selectAll('.u-skeleton-rect').boundingClientRect().exec((res) => {
+ this.RectNodes = res[0];
+ });
+ },
+ // 圆角元素列表
+ getFilletEls() {
+ let query = '';
+ // 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效
+ // #ifdef MP-WEIXIN
+ query = uni.createSelectorQuery().in(this.$parent);
+ // #endif
+ // #ifndef MP-WEIXIN
+ query = uni.createSelectorQuery()
+ // #endif
+ query.selectAll('.u-skeleton-fillet').boundingClientRect().exec((res) => {
+ this.filletNodes = res[0];
+ });
+ },
+ // 圆形元素列表
+ getCircleEls() {
+ let query = '';
+ // 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效
+ // #ifdef MP-WEIXIN
+ query = uni.createSelectorQuery().in(this.$parent);
+ // #endif
+ // #ifndef MP-WEIXIN
+ query = uni.createSelectorQuery()
+ // #endif
+ query.selectAll('.u-skeleton-circle').boundingClientRect().exec((res) => {
+ this.circleNodes = res[0];
+ });
+ }
+ },
+ // 组件被挂载
+ mounted() {
+ // 获取系统信息
+ let systemInfo = uni.getSystemInfoSync();
+ this.windowHeight = systemInfo.windowHeight;
+ this.windowWinth = systemInfo.windowWidth;
+ this.selecterQueryInfo();
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/style.components.scss";
+
+ .skeleton-fade {
+ width: 100%;
+ height: 100%;
+ background: rgb(194, 207, 214);
+ animation-duration: 1.5s;
+ animation-name: blink;
+ animation-timing-function: ease-in-out;
+ animation-iteration-count: infinite;
+ }
+
+ @keyframes blink {
+ 0% {
+ opacity: 1;
+ }
+
+ 50% {
+ opacity: 0.4;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+ }
+</style>