uni-app uni-ui插件新增骨架屏组件

在 uni-app 中新增一个骨架屏组件到 uni-ui 插件库中，可以极大地提升用户体验，尤其是在数据加载较慢的情况下。以下是一个基本的骨架屏组件的实现示例，你可以根据实际需求进行调整和扩展。

首先，我们需要在 uni-ui 插件中新增一个骨架屏组件文件，例如 Skeleton.vue。

<template>
  <view class="skeleton-wrapper" v-if="loading">
    <view class="skeleton-line" v-for="(item, index) in lines" :key="index" :style="getLineStyle(index)"></view>
  </view>
  <slot v-else></slot>
</template>

<script>
export default {
  name: 'UniSkeleton',
  props: {
    loading: {
      type: Boolean,
      default: true
    },
    lines: {
      type: Number,
      default: 3
    },
    lineWidth: {
      type: [String, Number],
      default: '100%'
    },
    lineHeight: {
      type: [String, Number],
      default: '20px'
    },
    animationDuration: {
      type: [String, Number],
      default: '1.5s'
    }
  },
  methods: {
    getLineStyle(index) {
      return {
        width: this.lineWidth,
        height: this.lineHeight,
        animation: `pulse ${this.animationDuration} infinite ease-in-out`
      };
    }
  }
};
</script>

<style scoped>
.skeleton-wrapper {
  position: relative;
  width: 100%;
}

.skeleton-line {
  background-color: #eee;
  margin-bottom: 8px;
  border-radius: 4px;
  opacity: 0.6;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
</style>

在这个组件中，我们通过 loading 属性控制骨架屏的显示与隐藏。lines 属性定义了骨架屏的行数，lineWidth 和 lineHeight 分别定义了每行的宽度和高度。animationDuration 定义了骨架屏动画的持续时间。

接下来，你可以在你的 uni-app 项目中使用这个骨架屏组件。例如：

<template>
  <view>
    <uni-skeleton :loading="isLoading" :lines="5"></uni-skeleton>
    <view v-if="!isLoading">
      <!-- 实际内容 -->
      <text>真实数据</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true
    };
  },
  mounted() {
    setTimeout(() => {
      this.isLoading = false;
    }, 2000); // 模拟数据加载
  }
};
</script>

在这个例子中，当 isLoading 为 true 时，显示骨架屏；当数据加载完成后，将 isLoading 设置为 false，显示真实内容。你可以根据实际需求调整骨架屏的样式和行为。