如何在微信小程序中使用骨架屏的步骤


Posted in Javascript onJune 12, 2020

本文介绍了微信小程序中使用骨架屏,分享给大家,具体如下:

先上效果图

如何在微信小程序中使用骨架屏的步骤

骨架屏主要起到占位作用,向用户说明该区域有内容,有一定的心理准备。

聊聊背景:刚上线一款小程序,随着上架的东西越来越多,微信小程序加载越来越慢,会出现一段时间的白屏(大概2-3s),这对用户体验上来讲特别不友好。所以在网上开始找这方面的资料,骨架屏主要分为两种方案,下面来说说这两种方案。

1、为每个需要使用骨架屏的页面定制一套静态页面。这种方法缺点很明显,需要为每个页面单独定制,布局如果修改则需要同时修改两个页面,增加了维护成本。但这种特别适用于长列表,只需要做用户可见的部分,可在一定程度上增加响应速度。

2、利用工具渲染页面 获取指定的DOM节点和对应样式,生成灰色块覆盖在原来的样式结构上,从而实现骨架屏。这种方式简单易用好维护,个人感觉不太适合在长列表页面。https://github.com/jayZOU/skeleton 这款骨架屏组件轻量、方便、快捷,里面有教程,强烈推荐。

使用哪一种方案,就要根据自己的项目情况来进行选择了。我采用的是第一种,因为这个页面加载的DOM节点太多了。从获取到数据后到渲染到页面这段时间有骨架屏做缓冲,效果倍棒。

实现方法:

1、根据原有页面的结构,在重写一个静态页面,把原来用来显示图片、文字的地方替换成有灰色背景色的块。

<!--骨架屏 -->

<view class="sort" wx:if="{{showSkeleton}}">

<scroll-view scroll-y="true" class="sortlist" style="height:{{contentHeight-170}}rpx">

<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

  wx.request({

    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) {    

    }

  })
}

总结一下:数据较多的页面使用骨架屏可以大大提高用户体验。上文提到的骨架屏组件也是非常好用,几分钟就可以上手使用。

初次接触骨架屏,有理解不到的地方还请多多指正。

到此这篇关于如何在微信小程序中使用骨架屏的步骤的文章就介绍到这了,更多相关小程序使用骨架屏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript下申明对象的几种方法小结
Oct 02 Javascript
JavaScript 继承详解(三)
Jul 13 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
微信小程序利用云函数获取手机号码
Dec 17 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
JavaScript闭包原理与用法学习笔记
May 29 Javascript
基于Web Audio API实现音频可视化效果
Jun 12 #Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 #Javascript
学前端,css与javascript重难点浅析
Jun 11 #Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 #Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 #jQuery
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
Jun 11 #Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 #Javascript
You might like
Smarty日期时间操作方法示例
2016/11/15 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
javascript实现动态标签云
2015/10/16 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
Python selenium的基本使用方法分析
2019/12/21 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
基于python实现操作git过程代码解析
2020/07/27 Python
python 实现超级玛丽游戏
2020/11/25 Python
Python截图并保存的具体实例
2021/01/14 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
介绍一下gcc特性
2012/01/20 面试题
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
《姥姥的剪纸》教学反思
2014/02/25 职场文书
年会搞笑主持词
2014/03/27 职场文书
国际贸易实训总结
2015/08/03 职场文书
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL