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


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 相关文章推荐
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 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
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
php页面缓存方法小结
2015/01/10 PHP
joomla数据库操作示例代码
2016/01/06 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
自制PHP框架之设计模式
2017/05/07 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
Json解析的方法小结
2016/06/22 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
python自动翻译实现方法
2016/05/28 Python
快速了解python leveldb
2018/01/18 Python
Python实现端口检测的方法
2018/07/24 Python
python脚本后台执行方式
2019/12/21 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
性能服装:HYLETE
2018/08/14 全球购物
什么是lambda函数
2013/09/17 面试题
九年级英语教学反思
2014/01/31 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
mysql知识点整理
2021/04/05 MySQL
SQL Server连接查询的实用教程
2021/04/07 SQL Server