如何在⼩程序中使⽤⾻架屏的步骤
本⽂介绍了⼩程序中使⽤⾻架屏，分享给⼤家，具体如下：
先上效果图
⾻架屏主要起到占位作⽤，向⽤户说明该区域有内容，有⼀定的⼼理准备。
聊聊背景：刚上线⼀款⼩程序，随着上架的东西越来越多，⼩程序加载越来越慢，会出现⼀段时间的⽩屏（⼤概2-3s），这对⽤户体验上来讲特别不友好。所以在⽹上开始这⽅⾯的资料，⾻架屏主要分为两种⽅案，下⾯来说说这两种⽅案。
1、为每个需要使⽤⾻架屏的页⾯定制⼀套静态页⾯。这种⽅法缺点很明显，需要为每个页⾯单独定制，布局如果修改则需要同时修改两个页⾯，增加了维护成本。但这种特别适⽤于长列表，只需要做⽤户可见的部分，可在⼀定程度上增加响应速度。
使⽤哪⼀种⽅案，就要根据⾃⼰的项⽬情况来进⾏选择了。我采⽤的是第⼀种，因为这个页⾯加载的DOM节点太多了。从获取到数据后到渲染到页⾯这段时间有⾻架屏做缓冲，效果倍棒。
实现⽅法：
1、根据原有页⾯的结构，在重写⼀个静态页⾯，把原来⽤来显⽰图⽚、⽂字的地⽅替换成有灰⾊背景⾊的块。
<!--⾻架屏 -->
<view class="sort" wx:if="{{showSkeleton}}">
<scroll-view scroll-y="true" class="sortlist" >
<view class="sort-l" >
<view class="sort-lgj"></view>
</view>
<view class="sort-l" >
<view class="sort-lgj"></view>
</view>
<view class="sort-l" >
<view class="sort-lgj"></view>
</view>
<view class="sort-l" >
<view class="sort-lgj"></view>
</view>
<view class="sort-l" >
<view class="sort-lgj"></view>
</view>
<view class="sort-l" >
<view class="sort-lgj"></view>
</view>
</scroll-view>
</view >
<view class="sort" wx:else>
这⾥是原来的页⾯
</view >
2、使⽤⼀个变量来控制⾻架屏的显⽰或隐藏。
onLoad: function(options) {
var that = this
url:'xxxx', //请求地址
data: { //发送给后台的数据
xxxx: xxxx
},
header: { //请求头
"Content-Type": "applciation/json"
},
method: "GET",
success: function(res) {
that.setData({
写文章的小程序
goodslist: data
})
that.setData({
// 数据渲染后
showSkeleton: false
})
},
fail: function(err) {
}
})
}
总结⼀下：数据较多的页⾯使⽤⾻架屏可以⼤⼤提⾼⽤户体验。上⽂提到的⾻架屏组件也是⾮常好⽤，⼏分钟就可以上⼿使⽤。
初次接触⾻架屏，有理解不到的地⽅还请多多指正。
到此这篇关于如何在⼩程序中使⽤⾻架屏的步骤的⽂章就介绍到这了，更多相关⼩程序使⽤⾻架屏内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。