微信小程序使用骨架屏

骨架屏的使用越来越广泛。在微信小程序中使用骨架屏如果自己实现，不同的页面对应不同的骨架屏，会有一定难度；不过，微信小程序已经提供生成骨架屏功能，使得我们在开发中非常方便，下面介绍如何生成

在生成骨架屏之前，先确保微信开发者工具是 1.03.2006032 或 1.04.2006032 以上的版本

1、生成骨架屏代码文件

找到要生成骨架屏的页面，并进行预览，找到模拟器面板右下角三点处

点击生成骨架屏

点击确定

生成 wxml 和 wxss 骨架屏文件

2、页面使用

（1）、在需要使用骨架屏的页面引入生成的骨架屏 wxml 文件，并将骨架屏代码通过小程序模板（template）的方式引入

<import src="product.skeleton.wxml"/>
<template is="skeleton" wx-if="{{loading}}" />

如下图

（2）、在 wxss 文件中引入骨架屏的 wxss 样式文件

@import "product.skeleton.wxss";

如下图

（3）、在 js 文件中添加骨架屏显示与隐藏的控制逻辑

  data: {productList: [],loading: true},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {let products = [1,2,3,4,5,6,7,8,9,10]setTimeout(() => {this.setData({productList: products,loading: false})}, 3000)},

通过 loading 的 true 或 false，来控制骨架屏的显示与隐藏

setTimeout 模拟后台请求返回数据

3、效果如下

参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html

微信小程序使用骨架屏相关推荐

微信小程序引入骨架屏组件
微信小程序引入骨架屏组件参考地址:https://github.com/cytle/ma-skeleton.git 1.克隆项目 2.把项目里的组件skeleton文件复制到自己的项目里 3.复制& ...
【微信技术-微信小程序】------- 骨架屏(加载流)配置(skeleton-config)及属性详解 (第三篇)
本篇文章是骨架屏(skeleton)配置及属性详解(第三篇) 第一篇文章:[微信技术-微信小程序]-------骨架屏(加载流) 简单入门(第一篇) 第二篇文章:[微信技术-微信小程序]------- ...
微信小程序：骨架屏的实现方法
为了优化用户体验,骨架屏一直是开发者比较喜欢的表现方式,也就是首屏占位的一种表现方式,不会让浏览者因为长时间的等待而焦躁.小程序中骨架屏的实现还是比较简单的,但是没用过的同学难免会误入歧途,今天就分享 ...
微信小程序引入骨架屏
骨架屏的使用越来越广泛.在微信小程序中使用骨架屏如果自己实现,不同的页面对应不同的骨架屏,会有一定难度:不过,微信小程序已经提供生成骨架屏功能,使得我们在开发中非常方便,下面介绍如何生成在生成骨架屏 ...
uni-app 微信小程序实现全屏悬浮按钮可拖动，自动吸附边缘
原文链接:uni-app 微信小程序实现全屏客服按钮可拖动,自动吸边-小月博客效果图如下: html : <movable-area class="movableArea" ...
php电脑端打开微信页面大小,电脑微信小程序设置全屏的方法是什么？
方法:首先配置小程序resizeable的参数设置为true,这样操作可以在电脑端打开一个较大的横向窗口显示,屏幕大小是1024乘以768的,然后再按下全屏按钮,便可实现微信小程序在电脑端的全屏模式. ...
家用电脑设置成小程序服务器,电脑微信小程序设置全屏的方法是什么
电脑微信小程序设置全屏的方法是什么方法:首先配置小程序resizeable的参数设置为true,这样操作可以在电脑端打开一个较大的横向窗口显示,屏幕大小是1024乘以768的,然后再按下全屏按钮,便 ...
微信小程序图片全屏预览组件，并解决svg真机显示黑屏问题
自己码了个微信小程序图片全屏预览组件,并解决了svg真机显示黑屏问题(即png等格式可以正常显示,但就svg无法显示). /*** 微信小程序图片预览组件* 1.支持预览svg.png.jpeg.jp ...
Uniapp 视频播放器运行到微信小程序后黑屏解决
之前,开发用uniapp开发h5时视频播放器是没问题的,但运行到小程序端以后就发现终端没报错播放器却黑屏了,通过不断翻阅资料后终于解决,原来在微信小程序端只支持三种格式的视频数据路径,如下: 网络路 ...

微信小程序使用骨架屏

微信小程序使用骨架屏相关推荐

最新文章

热门文章