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


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 相关文章推荐
jquery 插件学习(三)
Aug 06 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
jquery.validate使用详解
Jun 02 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 Javascript
Vue仿Bibibili首页的问题
Jan 21 Vue.js
基于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通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
新闻内页-JS分页
2006/06/07 Javascript
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
js日历功能对象
2012/01/12 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
vue引入swiper插件的使用实例
2017/07/19 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
2017/07/20 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
python 连接sqlite及简单操作
2017/06/30 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
django的csrf实现过程详解
2019/07/26 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
校园奶茶店创业计划书
2014/01/23 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
财产公证书
2014/04/10 职场文书
给校长的建议书500字
2014/05/15 职场文书
献爱心标语
2014/06/21 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
工伤私了协议书范本
2014/11/24 职场文书
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python