微信小程序---骨架屏实现,实现起来超级简单

这篇具有很好参考价值的文章主要介绍了微信小程序---骨架屏实现,实现起来超级简单。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、什么是骨架屏?

骨架屏是页面的一个空白版本,通常会在页面完全渲染之前,通过一些灰色的区块大致勾勒出轮廓,待数据加载完成后,再替换成真实的内容。通常在小程序中,我们需要手工维护骨架屏的代码,当业务变更时,同样需要对骨架屏代码进行调整。

二、为什么要用骨架屏

请求数据时都会出现一定的延迟,屏幕从而会出现一大片空白,以前对于这段等待时间的处理大多数都是采用菊花图加载动画或者类似于这种的加载动画。

这种方式请求时页面会卡住,直到请求完成,用户期间无法进行任何的操作,只能看着加载动效图,给人一种死机的感觉,体验差。为了进一步提升用户的体验,于是就出现了另一种加载方式——骨架屏( Skeleton Screen )

三、骨架屏效果

微信小程序---骨架屏实现,实现起来超级简单

未加载完成数据后,展示空白灰色盒子,加载成功后才展示内容

四、实现方法

1、微信开发者工具可以为当前页面生成骨架屏,工具入口位于模拟器面板右下角三点处。生成之后会多出两个文件。index.skeleton.wxml里面有使用步骤

微信小程序---骨架屏实现,实现起来超级简单微信小程序---骨架屏实现,实现起来超级简单

 文章来源地址https://www.toymoban.com/news/detail-503389.html

 2、引用文件,在index.wxml引用骨架屏,通过skeleton_loading来控制显示/隐藏微信小程序---骨架屏实现,实现起来超级简单

 在index.wxss里面调用骨架屏样式

微信小程序---骨架屏实现,实现起来超级简单

 在index.js里面data将skeleton_loading变为false,等数据请求成功后,将其变为true即可。

注:1、当页面布局改变之后,骨架屏也要重新成功

        2、生成骨架屏后,出现有些图片一样会展示,可以修改index.wxml或index.js将静态资源动态和请求成功后同步获取。切记不要直接更改生成骨架屏文件,除非你只想要一次性,不然后续更改很麻烦。

 

到了这里,关于微信小程序---骨架屏实现,实现起来超级简单的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序:简单实现地图导航功能实现

    里面的小图片需要自己找,真机调试时,点击导航即可进入地图,可导航,规划路线… 效果图 代码: wxml js wxss

    2024年02月11日
    浏览(66)
  • 微信小程序——登录注册的简单实现

    首先在微信开发者工具中创建一个登录注册界面,代码如下: longin.wxml部分: longin.wxss部分: longin.js部分: 接下来是注册界面 register.wxml部分: register.wxss部分: register.js部分: 后端部分: 需在navicat中创建user表,在idea中创建User类

    2024年02月11日
    浏览(53)
  • 微信小程序 简单的实现左右内容联动

    scroll-view 的属性 scroll-into-view 可以实现类似于瞄点链接的效果,在绑定的属性修改时会触发,滑动到对应id的地方 注意: id不能以数字开头 设置两个变量 tabIndex 、 nowIndex 保存状态,如果只设置一个更新变量时会触发瞄点更新 通过 tabIndex 更新瞄点 通过 nowIndex 设置当前的分类

    2024年02月03日
    浏览(69)
  • 微信小程序实现下拉简单展示接口数据

    在.js文件中这样写,代码如下: 在wxml文件中这样写,代码如下: 在.json文件中记得添加如下代码,打开下拉功能 \\\"window\\\":{     \\\"backgroundTextStyle\\\":\\\"light\\\",     \\\"navigationBarBackgroundColor\\\": \\\"#282A36\\\",     \\\"navigationBarTitleText\\\": \\\"Linux\\\",     \\\"navigationBarTextStyle\\\":\\\"white\\\",      \\\"enablePullDo

    2024年01月20日
    浏览(39)
  • 微信小程序实现一个简单的登录功能

    微信小程序实现一个简单的登录功能。包括一个登录页面和一个用户信息展示页面。在登录页面中输入用户名和密码,点击登录按钮进行验证,如果验证成功,则跳转到用户信息展示页面,并展示用户的信息(例如用户名和头像)。如果验证失败,则提示登录失败信息。 在上

    2024年02月03日
    浏览(61)
  • 微信小程序 实现最简单的组件拖拽

    最近在自主学习微信小程序的开发;对于零基础入门(没有学习过前端)的我,查阅了许多微信小程序拖拽的实现,大部分要么实现起来太复杂了,要么封装组件太复杂了,附带了拖拽之后排序等功能;因此写下这篇个人觉得最好理解的 微信小程序元素拖拽的实现; 这边采用了

    2024年02月09日
    浏览(68)
  • 微信小程序实现简单登录界面和登录功能

    客户端开发和学习过程中,登录功能是一个很常见的场景。本文将介绍,微信小程序开发过程中是如何实现登录界面和登录功能的。 话不多说,直接上代码。 (1)index.js文件,代码如下: (2)index.wxml文件,代码如下: (3)index.wxss文件,代码如下: 运行结果如下: 本文介绍了微信

    2024年02月12日
    浏览(98)
  • 微信小程序实现倒计时功能(超简单)

     声明倒计时长和当前剩余时长(字符串形式),我这里是30分钟(单位为秒)  定义倒计时函数,把倒计时长除以60的整数部分作为分,把倒计时长除以60的余数作为秒; 执行完后减一秒,用定时器每隔一秒执行一次。  如果秒数不够两位,则在秒前加上字符串\\\'0\\\'。如:20:

    2024年02月11日
    浏览(55)
  • 微信小程序简单输入框界面(实现选择标签功能)

    1、js代码: 2、wxml代码: 3、wxss代码: 布局简单,对于初学者可以用来看看,随便写的,如果出现运行异常,请使用真机预览呦~

    2024年03月12日
    浏览(84)
  • 微信小程序播放器的一些简单功能实现

    一、构建npm(后面用到moment的格式化时间) 二、系统后台监测程序播放器配置(系统后台要知道该播放器是否在播放歌曲,并有一些简单的业务逻辑) 在app.json中添加以下代码----和tarbar同级 三、由于后面用到后台需要监测是哪首歌,需要有id和播放状态 在app.js中添加如下代

    2024年01月23日
    浏览(70)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包