更新记录

1.0(2019-11-04)

新增属性

如自己需要其它样式,自己根据自己项目修改


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
× × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

skeleton

感谢原作者 https://ext.dcloud.net.cn/plugin?id=852

自己项目非常需要骨架,正好原作者发布了 1.0 根据自己项目 自己修改了下。

目前仅支持: 1.轮播图 2.分类栏 3.头像 4.文章条 5.动态心情

以上是根据自己项目修改的,后续再拓展,或者自己根据自己项目修改,原作者写的还是很灵活的,修改方便!

属性说明

属性名 类型 默认值 说明
loading Boolean true 是否显示占位图
flexType String flex-start 排列方式 center 居中 √ space-between 两端对齐 √ space-around 子元素拉手分布 √ flex-start 居左 flex-end 居右
imgTitle Boolean false 轮播图占位图
showAvatar Boolean true 是否显示头像占位图
nameRow Number 1 显示头像圆 1 个
avatarSize String 50px 头像站占位图大小
avatarShape String round 头像形状,可选值:round, square
showTitle Boolean true 是否显示标题占位图
titleWidth String 40% 标题占位图宽度
row Number 3 标题段落占位图行数
animate Boolean true 是否开启动画

使用示例

<skeleton :loading="loading" :avatarSize="skeleton1.avatarSize" :row="skeleton1.row" :showTitle="skeleton1.showTitle">
  <view class="section-content">我是段落1</view>
</skeleton>
import Skeleton from '../components/skeleton/index.vue';
export default {
  components: {
    Skeleton,
  },
  data() {
    return {
      loading: true,
      skeleton1: {
        avatarSize: '52px',
        row: 3,
        showTitle: true,
      },
    };
  },
  created() {
    this.reloadData();
  },
  methods: {
    reloadData() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 3000);
    },
  },
};

定制开发-------------- 可定制各类高端项目、定制需求、解决问题、APP、小程序、H5

1.承接定制各类需求定制;

2.承接各类高端 APP、小程序、H5 项目,定制联系群主的 QQ:270315475;

隐私、权限声明

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

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

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

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问