在微信小程序中使用骨架屏

在微信小程序中使用骨架屏可以优化用户体验,避免页面加载时出现白屏现象。以下是详细的使用方法和注意事项:

使用方法

  1. 生成骨架屏代码

    • 打开微信开发者工具,进入需要添加骨架屏的页面。
    • 在模拟器面板右下角点击三个点,选择"生成骨架屏"。
    • 点击"确定"后,会在当前页面同级目录下生成page.skeleton.wxmlpage.skeleton.wxss两个文件。
  2. 引入骨架屏

    • 在页面的wxml文件中引入骨架屏模板:

      xml 复制代码
      <import src="page.skeleton.wxml"/>
      <template is="skeleton" wx:if="{{loading}}" />
    • 在页面的wxss文件中引入骨架屏样式:

      css 复制代码
      @import "./page.skeleton.wxss";
  3. 控制骨架屏显示与隐藏

    • 在页面的data数据对象中添加一个loading变量,并将其初始值设置为true
    • 在数据加载完成后,通过setData方法将loading变量设置为false,隐藏骨架屏。

配置骨架屏

可在project.config.json中增加字段skeletonConfig进行骨架屏相关配置,页面配置会覆盖掉全局配置。开发者可根据需要设置文字、图片、按钮的颜色和形状,同时可根据excludesremovehide等忽视或隐藏部分页面元素,以获取更优的展示效果。

注意事项

  1. 骨架屏仅包括页面首屏中的可见区域,对于横向滚动的swiper等容器,超出屏幕的子元素将被忽略。
  2. 骨架屏的布局复用开发者的页面布局,需要骨架屏自适应页面尺寸时,页面布局应采用rpx等自适应方案。
  3. 部分组件如movable-viewmovable-arearich-texteditorpickerpicker-viewpicker-view-columnadofficial-accountopen-data无法生成理想的骨架效果,可通过添加一个父容器,结合grayBlockempty等配置,将其置灰。
  4. 请勿修改自动生成的骨架屏的代码,当效果不理想时,建议调整相关配置,这样当页面变更时,仍可自动生成。
  5. 生成的骨架屏代码中会包含预览时的页面数据,将被用来填充页面。
  6. 骨架屏通常用于商品列表、新闻列表等页面,对于动画/原生组件较多的页面展示效果不佳。
  7. 该能力除用于展示首屏骨架外,也可作为局部加载的loading样式,可灵活使用。
  8. 在使用过程中,为了避免骨架屏和真实页面元素同时出现,可在真实页面的view标签上加一个wx:else的条件。
  9. 微信开发工具生成wxml有行样式需要修改
相关推荐
2501_916007474 小时前
HTTPS 抓包乱码怎么办?原因剖析、排查步骤与实战工具对策(HTTPS 抓包乱码、gzipbrotli、TLS 解密、iOS 抓包)
android·ios·小程序·https·uni-app·iphone·webview
卷Java6 小时前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot
笨笨狗吞噬者8 小时前
【uniapp】小程序端实现分包异步化
前端·微信小程序·uni-app
2501_9160088910 小时前
HTTPS 双向认证抓包实战,原理、难点、工具与可操作的排查流程
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9151063210 小时前
HTTPS 能抓包吗?实战答案与逐步可行方案(HTTPS 抓包原理、证书Pinning双向认证应对、工具对比)
网络协议·http·ios·小程序·https·uni-app·iphone
游戏开发爱好者810 小时前
App HTTPS 抓包实战,原理、常见问题与可行工具路线(开发 测试 安全 角度)
网络协议·安全·ios·小程序·https·uni-app·iphone
2501_9151063210 小时前
App HTTPS 抓包实战指南,原理、常见阻碍、逐步排查与工具组合
网络协议·http·ios·小程序·https·uni-app·iphone
Roye_ack12 小时前
【项目实战 Day7】springboot + vue 苍穹外卖系统(微信小程序 + 微信登录模块 完结)
spring boot·redis·后端·小程序·个人开发·学习方法·苍穹外卖
weixin_lynhgworld12 小时前
短剧小程序系统开发:引领影视行业数字化转型浪潮
大数据·小程序
流***陌14 小时前
一键预约上门服务:到家洗车小程序的便捷功能与场景化体验
小程序