更新记录

1.0.0（2024-12-13） 下载此版本

新增组件

平台兼容性

hbxw-skeleton骨架屏组件

介绍

骨架屏组件一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验

使用示例

<template>
    <view class="hbxw-skeleton-card">
        <hbxw-skeleton :status="status">
      <view class="test-default">
        <text>这里是骨架屏组件的测试0</text>
        <text>这里是骨架屏组件的测试1</text>
        <text>这里是骨架屏组件的测试2</text>
      </view>
    </hbxw-skeleton>
        <hbxw-skeleton style="margin-top: 20rpx" :status="status" type="lr">
      <view class="test-lr">
        <image class="test-img" src="https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE" mode="" />
        <text>从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜</text>
      </view>
    </hbxw-skeleton>
        <hbxw-skeleton style="margin-top: 20rpx;width: 460rpx;" :status="status" type="tb">
      <view class="test-tb">
        <image class="test-img" src="https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE" mode="" />
        <text>从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜</text>
      </view>
    </hbxw-skeleton>
    <button style="margin-top: 20rpx;" @click="toggleStatus">{{status === 'loading' ? '加载中...' : '加载完成'}}</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                status: 'loading'
            }
        },
        methods: {
            toggleStatus() {
        this.status = this.status === 'loading' ? 'show' : 'loading';
      }
        }
    }
</script>

<style>
.hbxw-skeleton-card{
  width: 100%;
}
.test-default{
  display: flex;
  flex-direction: column;
}
.test-lr{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20rpx;
}
.test-tb{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
}
.test-img{
  width: 100rpx;
  height: 100rpx;
  flex: none;
  border-radius: 50%;
}
.test-text{
  font-size: 28rpx;
  line-height: 1.5em;
  color: #333;
}
</style>

API

Props