本篇文章是骨架屏(skeleton)配置及属性详解(第三篇)
第一篇文章:【微信技术-微信小程序】-------骨架屏(加载流) 简单入门(第一篇)
第二篇文章:【微信技术-微信小程序】------- 渐进式骨架屏(加载流)(第二篇)
下面内容主要功能骨架屏(skeleton)配置及属性
温馨提示:所有在.wxml文件中添加的新属性、或者在skeleton-config配置中新添加的值 、想让属性能够显示该效果 需要删除对应的骨架屏文件.skelecton.wxml, .skelecton.wxss 文件 及.wxml里面引用的模板和.wxss里面引用的样式 然后在生成新的骨架屏即可
接下来已:pages/index/index路径文件为例
一、data-skeleton-bgColor属性
注释:让骨架的某块内容显示特定的背景色
1.例如让标题内容区块变成红色背景色 如下图:
//data-skeleton-bgColor="#ff0000"
<!--标题内容-->
<view class="top-nav" data-skeleton-hide="topNav" data-skeleton-bgColor="#ff0000" hidden="{{!topNav}}">
<view class="nav_item" wx:for="{{navs}}" wx:key="*this">
<image class="nav_item_image" src="{{item}}"></image>
<view class="nav_item_title"><text>皮皮标题</text></view>
</view>
</view>
效果图:
index.wxml对应的index.skeleton.wxml骨架屏 里面的 背景样式也将加上 如下图:
二、data-skeleton-list 属性
注释:将子节点被处理成第一项的克隆、说白了意思就是 将子节点下的元素拷贝一份作为骨架屏的模板
2.1 index.wxml文件代码
// content_item 元素下所有都将作为骨架屏模板
<!--主体内容-->
<view class="middle-content" data-skeleton-list data-skeleton-hide="middleContent" hidden="{{!middleContent}}">
<view class="content_item" wx:for="{{list}}" wx:key="id" >
<image class="content_item_img" mode="scaleToFill" src="{{item.icon}}"></image>
<view class="content_item_text">
<text>{{item.text}}</text>
</view>
</view>
</view>
2.2 index.skeleton.wxml文件代码
//content_item 元素被生成两个或多个一样的模板 然后文本内容也是获取content_item的第一项文本内容。
<view class="middle-content" hidden="{{middleContent}}">
<view class="content_item">
<image class="content_item_img sk-image" mode="scaleToFill" style="border: none;"></image>
<view class="content_item_text">
<text class="sk-transparent sk-text-14-2857-787 sk-text">脸颊两边有着小小的电力袋。遇到危险时就会放电。会将尾巴竖起来,去感觉周围是否安全。</text>
</view>
</view>
<view class="content_item">
<image class="content_item_img sk-image" mode="scaleToFill" style="border: none;"></image>
<view class="content_item_text">
<text class="sk-transparent sk-text-14-2857-244 sk-text">脸颊两边有着小小的电力袋。遇到危险时就会放电。会将尾巴竖起来,去感觉周围是否安全。</text>
</view>
</view>
</view>
三、data-skeleton-li属性
注释:相同的元素被认为是同一列表的子项、说白了意思就是 相同的元素展示的内容块相同可以被认为同一列表
//list-item相同元素展示的效果相同 可以用 data-skeleton-li 表示 赋值属性值"goods"
//再生成骨架屏文件 代码会根据data-skeleton-li属性 只获取第一个list-item元素 作为骨架屏模板即可。
<view>
<view class="other-block">其它</view>
<view class="list-item" data-skeleton-li="goods">子项内容</view>
<view class="list-item" data-skeleton-li="goods">子项内容</view>
<view class="list-item" data-skeleton-li="goods">子项内容</view>
</view>
四、data-skeleton-hide属性、hidden属性
注释:data-skeleton-hide 属性 与 hidden 属性 配合使用 进而可以实现渐进式骨架屏
这个我在第二篇文章讲过 不做过多说明【微信技术-微信小程序】------- 渐进式骨架屏(加载流)(第二篇)
五、skeleton-config 配置说明
注释:skeleton-config 配置在 project.config.json 文件进行骨架屏相关配置,页面配置会覆盖掉全局配置。
注释: 页面配置会覆盖掉全局配置 含义是: 在index.skeleton.html文件里面修改的相关样式会覆盖project.config.json 文件里的skeleton-config 全局配置
提示:修改配置后 重现不了新的效果 请看此文章最上面的提示语
// project.config.json
{
"skeleton-config": {
"global": {
// 默认的全局配置
"loading": "spin",//骨架屏显示时的动画:spin 旋转 chiaroscuro 明暗对比 shine 闪耀
"text": {
"color": "#EEEEEE"//文字区块颜色值
},
"image": {
"shape": "rect",//图片或者图标的样式 circle 圆形,rect矩形
"color": "#EFEFEF",//图片区块颜色
"shapeOpposite": [".image",".img"]//与配置的 shape 形状相反 也就是说shape 是rect .image元素内的形状是 rect 矩形
},
"button": {
"color": "#EFEFEF",//按钮块的颜色值
"excludes": [".button"]//.button 元素不做为按钮块
},
"pseudo": {
"color": "#EFEFEF",//伪元素的区块颜色 很多代码中会有伪元素 要是不想有颜色就去掉 不然可能效果出现大面积不好!
"shape": "circle",//伪元素的区块显示形状
"shapeOpposite": [".image",".img"]//与配置的 shape 形状相反 也就是说shape 是rect .image元素内的形状是 rect 矩形
},
"excludes": [".image",".content"],//不需要进行骨架处理的元素
"remove": [".title"],//不需要生成页面骨架的元素
"empty": [".empty"],//被选择的元素将被清空子元素
"hide": [".hiden"],//不需要移除,但是通过设置其透明度为 0 隐藏 的元素
"grayBlock": [".grayblock"],//被选择的元素将被被插件处理成一个色块,色块的颜色和按钮块颜色一致。内部元素将不再做特殊处理,文字将隐藏
"showNative": false,//显示原生组件,为 false 时原生组件被处理为 view
"backgroundColor": "transparent",//骨架屏背景色
"mode": "fullscreen",//默认为使用绝对定位占满全屏。当对自定义组件使用,作为局部加载的样式时,可设为 auto,高度随内容撑开
"templateName": "skeleton",//骨架屏模板的 name 值 默认“skeleton” 也就是生成 index.skeleton.html 文件名 改成“sk” 生成的文件名 :index.sk.html
"cssUnit": "rpx",//支持的枚举值:rpx, rem, vw, vh, vmin, vmax
"decimal": 4,//生成骨架页面中 css 值保留的小数位数,默认值是 4
},
"pages": {
"pages/index/index": {
// 页面配置,key 为页页面路径
}
}
}
原生组件包括 camera, live-player, live-pusher, video, map, canvas, picker, input, textarea
举例一: 将图片的区块骨架屏显示为圆形
在 project.config.json 的 skeleton-config 配置中的 image shape 值为“circle” 如下图:
常见问题:
其他文章:
【微信技术-微信小程序】-------骨架屏(加载流) 简单入门(第一篇)
【微信技术-微信小程序】------- 渐进式骨架屏(加载流)(第二篇)
【微信技术-微信小程序】------- 使用Vant-Weapp组件简单入门
【微信技术-微信小程序】------ 使用ColorUI组件简单入门
【微信技术-微信公众号】-------- 实现拍照或选择相册接口:wx.chooseImage的使用实例[JS-SDK]