更新记录

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

新增卡片组件

平台兼容性

Vue2	Vue3
√	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 3.1.0	×	√	×	×	√	√

钉钉小程序	快手小程序	飞书小程序	京东小程序	鸿蒙元服务
×	√	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	×	×	×	×	×

hbxw-card组件

介绍

支持骨架屏，UI高度可配置的卡片容器组件，默认支付22种卡片阴影效果，如果你正在纠结用什么卡片效果，可以试着使用一下，也许有正合你心意的款式，你也可以通过自定义配置得到合你心意的卡片效果

使用示例

推荐先直接复制示例代码到工程中看效果了解下使用方法再投入项目使用。


<template>
    <view class="hbxw-card-text-container">
    <view class="test-hbxwcard-title">阴影卡片1</view>
        <hbxw-card :customStyle="{width: '100%', marginTop: '30rpx',marginBottom: '20rpx'}" :status="status1" type="1" skeletonType="lr">
      <view class="test-card-content">
        <image src="https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE" class="video-poster" />
        <view class="test-card-text">
          <text>阴影卡片1</text>
          <text>从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜</text>
        </view>
      </view>
    </hbxw-card>
    <button @click="toggleStatus('status1')">{{status1 === 'loading' ? '加载中...': '已加载'}}</button>

   <view class="test-hbxwcard-title">阴影卡片2</view>
        <hbxw-card :customStyle="{width: '100%', marginTop: '30rpx',marginBottom: '20rpx'}" :status="status2" type="2" skeletonType="lr">
      <view class="test-card-content">
        <image src="https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE" class="video-poster" />
        <view class="test-card-text">
          <text>阴影卡片2</text>
          <text>从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜</text>
        </view>
      </view>
    </hbxw-card>
    <button @click="toggleStatus('status2')">{{status1 === 'loading' ? '加载中...': '已加载'}}</button>

    <view class="test-hbxwcard-title">阴影卡片3</view>
        <hbxw-card :customStyle="{width: '100%', marginTop: '30rpx',marginBottom: '20rpx'}" :status="status3" type="3" skeletonType="lr">
      <view class="test-card-content">
        <image src="https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE" class="video-poster" />
        <view class="test-card-text">
          <text>阴影卡片3</text>
          <text>从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜</text>
        </view>
      </view>
    </hbxw-card>
    <button @click="toggleStatus('status3')">{{status3 === 'loading' ? '加载中...': '已加载'}}</button>

    <view class="test-hbxwcard-title">阴影卡片4</view>
        <hbxw-card :customStyle="{width: '100%', marginTop: '30rpx',marginBottom: '20rpx'}" :status="status4" type="4" skeletonType="lr">
      <view class="test-card-content">
        <image src="https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE" class="video-poster" />
        <view class="test-card-text">
          <text>阴影卡片4</text>
          <text>从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜</text>
        </view>
      </view>
    </hbxw-card>
    <button @click="toggleStatus('status4')">{{status4 === 'loading' ? '加载中...': '已加载'}}</button>

    <view class="test-hbxwcard-title">阴影卡片5</view>
        <hbxw-card :customStyle="{width: '100%', marginTop: '30rpx',marginBottom: '20rpx'}" :status="status5" type="5" skeletonType="lr">
      <view class="test-card-content">
        <image src="https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE" class="video-poster" />
        <view class="test-card-text">
          <text>阴影卡片5</text>
          <text>从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜</text>
        </view>
      </view>
    </hbxw-card>
    <button @click="toggleStatus('status5')">{{status5 === 'loading' ? '加载中...': '已加载'}}</button>

    <view class="test-hbxwcard-title">阴影卡片6</view>
        <hbxw-card :customStyle="{width: '100%', marginTop: '30rpx',marginBottom: '20rpx'}" :status="status6" type="6" skeletonType="lr">
      <view class="test-card-content">
        <image src="https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE" class="video-poster" />
        <view class="test-card-text">
          <text>阴影卡片6</text>
          <text>从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜</text>
        </view>
      </view>
    </hbxw-card>
    <button @click="toggleStatus('status6')">{{status6 === 'loading' ? '加载中...': '已加载'}}</button>

    <view class="test-hbxwcard-title">阴影卡片7</view>
        <hbxw-card :customStyle="{width: '100%', marginTop: '30rpx',marginBottom: '20rpx'}" :status="status7" type="7" skeletonType="lr">
      <view class="test-card-content">
        <image src="https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE" class="video-poster" />
        <view class="test-card-text">
          <text>阴影卡片7</text>
          <text>从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜</text>
        </view>
      </view>
    </hbxw-card>
    <button @click="toggleStatus('status7')">{{status7 === 'loading' ? '加载中...': '已加载'}}</button>

    <view class="test-hbxwcard-title">阴影卡片8</view>
        <hbxw-card :customStyle="{width: '100%', marginTop: '30rpx',marginBottom: '20rpx'}" :status="status8" type="8" skeletonType="lr">
      <view class="test-card-content">
        <image src="https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE" class="video-poster" />
        <view class="test-card-text">
          <text>阴影卡片8</text>
          <text>从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜</text>
        </view>
      </view>
    </hbxw-card>
    <button @click="toggleStatus('status8')">{{status8 === 'loading' ? '加载中...': '已加载'}}</button>

    <view class="test-hbxwcard-title">阴影卡片9</view>
        <hbxw-card :customStyle="{width: '100%', marginTop: '30rpx',marginBottom: '20rpx'}" :status="status9" type="9" skeletonType="lr">
      <view class="test-card-content">
        <image src="https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE" class="video-poster" />
        <view class="test-card-text">
          <text>阴影卡片9</text>
          <text>从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜</text>
        </view>
      </view>
    </hbxw-card>
    <button @click="toggleStatus('status9')">{{status9 === 'loading' ? '加载中...': '已加载'}}</button>

    <view class="test-hbxwcard-title">阴影卡片10</view>
        <hbxw-card :customStyle="{width: '100%', marginTop: '30rpx',marginBottom: '20rpx'}" :status="status10" type="10" skeletonType="lr">
      <view class="test-card-content">
        <image src="https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE" class="video-poster" />
        <view class="test-card-text">
          <text>阴影卡片10</text>
          <text>从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜</text>
        </view>
      </view>
    </hbxw-card>
    <button @click="toggleStatus('status10')">{{status10 === 'loading' ? '加载中...': '已加载'}}</button>

    <view class="test-hbxwcard-title">阴影卡片11</view>
        <hbxw-card :customStyle="{width: '100%', marginTop: '30rpx',marginBottom: '20rpx'}" :status="status11" type="11" skeletonType="lr">
      <view class="test-card-content">
        <image src="https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE" class="video-poster" />
        <view class="test-card-text">
          <text>阴影卡片11</text>
          <text>从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜</text>
        </view>
      </view>
    </hbxw-card>
    <button @click="toggleStatus('status11')">{{status11 === 'loading' ? '加载中...': '已加载'}}</button>

    <view class="test-hbxwcard-title">阴影卡片12</view>
        <hbxw-card :customStyle="{width: '100%', marginTop: '30rpx',marginBottom: '20rpx'}" :status="status12" type="12" skeletonType="lr">
      <view class="test-card-content">
        <image src="https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE" class="video-poster" />
        <view class="test-card-text">
          <text>阴影卡片12</text>
          <text>从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜</text>
        </view>
      </view>
    </hbxw-card>
    <button @click="toggleStatus('status12')">{{status12 === 'loading' ? '加载中...': '已加载'}}</button>

    <view class="test-hbxwcard-title">阴影卡片13</view>
        <hbxw-card :customStyle="{width: '100%', marginTop: '30rpx',marginBottom: '20rpx'}" :status="status13" type="13" skeletonType="lr">
      <view class="test-card-content">
        <image src="https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE" class="video-poster" />
        <view class="test-card-text">
          <text>阴影卡片13</text>
          <text>从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜</text>
        </view>
      </view>
    </hbxw-card>
    <button @click="toggleStatus('status13')">{{status13 === 'loading' ? '加载中...': '已加载'}}</button>

    <view class="test-hbxwcard-title">阴影卡片14</view>
        <hbxw-card :customStyle="{width: '100%', marginTop: '30rpx',marginBottom: '20rpx'}" :status="status14" type="14" skeletonType="lr">
      <view class="test-card-content">
        <image src="https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE" class="video-poster" />
        <view class="test-card-text">
          <text>阴影卡片14</text>
          <text>从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜</text>
        </view>
      </view>
    </hbxw-card>
    <button @click="toggleStatus('status14')">{{status14 === 'loading' ? '加载中...': '已加载'}}</button>

    <view class="test-hbxwcard-title">阴影卡片15</view>
        <hbxw-card :customStyle="{width: '100%', marginTop: '30rpx',marginBottom: '20rpx'}" :status="status15" type="15" skeletonType="lr">
      <view class="test-card-content">
        <image src="https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE" class="video-poster" />
        <view class="test-card-text">
          <text>阴影卡片15</text>
          <text>从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜</text>
        </view>
      </view>
    </hbxw-card>
    <button @click="toggleStatus('status15')">{{status15 === 'loading' ? '加载中...': '已加载'}}</button>

    <view class="test-hbxwcard-title">阴影卡片16</view>
        <hbxw-card :customStyle="{width: '100%', marginTop: '30rpx',marginBottom: '20rpx'}" :status="status16" type="16" skeletonType="lr">
      <view class="test-card-content">
        <image src="https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE" class="video-poster" />
        <view class="test-card-text">
          <text>阴影卡片16</text>
          <text>从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜</text>
        </view>
      </view>
    </hbxw-card>
    <button @click="toggleStatus('status16')">{{status16 === 'loading' ? '加载中...': '已加载'}}</button>

    <view class="test-hbxwcard-title">阴影卡片17</view>
        <hbxw-card :customStyle="{width: '100%', marginTop: '30rpx',marginBottom: '20rpx'}" :status="status17" type="17" skeletonType="lr">
      <view class="test-card-content">
        <image src="https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE" class="video-poster" />
        <view class="test-card-text">
          <text>阴影卡片17</text>
          <text>从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜</text>
        </view>
      </view>
    </hbxw-card>
    <button @click="toggleStatus('status17')">{{status17 === 'loading' ? '加载中...': '已加载'}}</button>

    <view class="test-hbxwcard-title">阴影卡片18</view>
        <hbxw-card :customStyle="{width: '100%', marginTop: '30rpx',marginBottom: '20rpx'}" :status="status18" type="18" skeletonType="lr">
      <view class="test-card-content">
        <image src="https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE" class="video-poster" />
        <view class="test-card-text">
          <text>阴影卡片18</text>
          <text>从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜</text>
        </view>
      </view>
    </hbxw-card>
    <button @click="toggleStatus('status18')">{{status18 === 'loading' ? '加载中...': '已加载'}}</button>

    <view class="test-hbxwcard-title">阴影卡片19</view>
        <hbxw-card :customStyle="{width: '100%', marginTop: '30rpx',marginBottom: '20rpx'}" :status="status19" type="19" skeletonType="lr">
      <view class="test-card-content">
        <image src="https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE" class="video-poster" />
        <view class="test-card-text">
          <text>阴影卡片19</text>
          <text>从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜</text>
        </view>
      </view>
    </hbxw-card>
    <button @click="toggleStatus('status19')">{{status19 === 'loading' ? '加载中...': '已加载'}}</button>

    <view class="test-hbxwcard-title">阴影卡片20</view>
        <hbxw-card :customStyle="{width: '100%', marginTop: '30rpx',marginBottom: '20rpx'}" :status="status20" type="20" skeletonType="lr">
      <view class="test-card-content">
        <image src="https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE" class="video-poster" />
        <view class="test-card-text">
          <text>阴影卡片20</text>
          <text>从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜</text>
        </view>
      </view>
    </hbxw-card>
    <button @click="toggleStatus('status20')">{{status20 === 'loading' ? '加载中...': '已加载'}}</button>

    <view class="test-hbxwcard-title">阴影卡片21</view>
        <hbxw-card :customStyle="{width: '100%', marginTop: '30rpx',marginBottom: '20rpx'}" :status="status21" type="21" skeletonType="lr">
      <view class="test-card-content">
        <image src="https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE" class="video-poster" />
        <view class="test-card-text">
          <text>阴影卡片21</text>
          <text>从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜</text>
        </view>
      </view>
    </hbxw-card>
    <button @click="toggleStatus('status21')">{{status21 === 'loading' ? '加载中...': '已加载'}}</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                status1: 'loading',
                status2: 'loading',
                status3: 'loading',
                status4: 'loading',
                status5: 'loading',
                status6: 'loading',
                status7: 'loading',
                status8: 'loading',
                status9: 'loading',
                status10: 'loading',
                status11: 'loading',
                status12: 'loading',
                status13: 'loading',
                status14: 'loading',
                status15: 'loading',
                status16: 'loading',
                status17: 'loading',
                status18: 'loading',
                status19: 'loading',
                status20: 'loading',
                status21: 'loading'
            }
        },
        methods: {
            toggleStatus(statusName) {
        this[statusName] = this[statusName] === 'loading' ? 'show': 'loading';
      }
        }
    }
</script>

<style>
.test-hbxwcard-title{
  font-size: 24rpx;
  margin-bottom: 10rpx;
}
.hbxw-card-text-container{
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  box-sizing: border-box;
}
.test-card-content{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx;
}
.test-card-text{
  display: flex;
  flex-direction: column;
}
.video-poster{
  width: 100rpx;
  height: 100rpx;
  flex: none;
  margin-right: 10rpx;
}
</style>

API

Props

属性名	类型	默认值	必填	说明
status	String	loading	是	当前卡片状态，loading:显示骨架屏/show：显示内容/hide：隐藏卡片
type	String	1	否	卡片默认有1-22共22种样式
skeletonType	String	""	否	骨架屏样式,''：整条横幅型/lr:左右型/tb：上下型
customStyle	Object	null	否	自定义卡片容器根元素的样式
contentStyle	Object	null	否	自定义卡片内容容器元素的样式，如圆角，阴影

注：包体积偏大是因为有示例图片,真正会打包到项目中的体积是很小的

hbxw-card卡片容器组件 hbxw-card 卡片 卡片容器 骨架屏卡片 骨架屏卡片容器

更新记录

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

平台兼容性

hbxw-card组件

介绍

使用示例

API

Props

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

翻译助手

变量格式转换

卡片样式集

多行文本溢出省略号折叠展开文本容器组件

时间段选择器

hbxw-card卡片容器组件 hbxw-card 卡片 卡片容器 骨架屏卡片 骨架屏卡片容器

更新记录

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

平台兼容性

hbxw-card组件

介绍

使用示例

API

Props

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

翻译助手

变量格式转换

卡片样式集

多行文本溢出省略号折叠展开文本容器组件

时间段选择器

Modal title

hbxw-card卡片容器组件 hbxw-card 卡片卡片容器骨架屏卡片骨架屏卡片容器

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