骨架屏使用手册

1.下载插件放到项目 components目录下

2. 引入并注册

import taozhiSkeleton from '@/components/taozhiSkeleton/taozhiSkeleton.vue' // 骨架屏
export default {
  components: {
    taozhiSkeleton
  },
}

3. 使用

<taozhi-skeleton type="listTransverse" :number="3"></taozhi-skeleton>

4. 参数说明

参数名类型说明
typeString骨架屏类型
animationBoolean是否启动动画
numberNumber列表item数量
havePaddingBoolean是否显示 padding

type参数

字段说明
listTransverse横向列表
listVertical纵向列表
listAudio音频列表
listCourse图文、课程列表
listGrid九宫格列表
listPartner用户、商户列表
listBook书籍列表
calendar日历组件骨架屏
gift赠品
edition教材管理列表
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序骨架是一种提高小程序加载速度和用户体验的技术,它通过在页面加载时先展示一个简单的骨架,让用户感受到页面正在加载中,避免了空白页面的尴尬。 以下是微信小程序骨架的详细使用方法: 1. 安装插件 在小程序项目中使用骨架需要安装插件,可以使用官方提供的插件:wechat-miniprogram/skeleton,具体安装方法如下: ``` npm install @wechat-miniprogram/skeleton --save ``` 2. 引入骨架组件 在需要使用骨架的页面中引入骨架组件,例如: ``` <import src="../../miniprogram_npm/@wechat-miniprogram/skeleton/index.wxml" /> <template is="skeleton" data="{{loading: isLoading}}"></template> ``` 3. 定义骨架模板 在页面中定义骨架模板,例如: ``` <template name="skeleton"> <view class="skeleton-container" wx:if="{{loading}}"> <view class="skeleton-item"></view> <view class="skeleton-item"></view> <view class="skeleton-item"></view> </view> </template> ``` 其中,skeleton-container 为骨架容器,skeleton-item 为骨架单元,可以根据实际需求定义。 4. 控制骨架显示和隐藏 在页面的 onLoad 函数中设置 isLoading 变量为 true,页面加载完成后再将 isLoading 变量设置为 false,例如: ``` Page({ data: { isLoading: true }, onLoad: function () { setTimeout(() => { this.setData({ isLoading: false }) }, 2000) } }) ``` 5. 自定义骨架样式 可以通过在 app.wxss 文件中定义全局样式或在页面的 wxss 文件中定义局部样式来自定义骨架的样式,例如: ``` /* 全局样式 */ .skeleton-container { background-color: #f5f5f5; padding: 20rpx; display: flex; flex-direction: column; } .skeleton-item { height: 100rpx; margin-bottom: 20rpx; background-color: #fff; } /* 局部样式 */ .page-skeleton .skeleton-container { padding: 30rpx; } .page-skeleton .skeleton-item { height: 120rpx; } ``` 以上就是微信小程序骨架的详细使用方法,通过使用骨架可以提高小程序的用户体验和加载速度,让用户更加愉悦地使用小程序。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值