热门标签
热门文章
- 1SpringBoot2.3整合Mockito实现单元测试_@extendwith(mockitoextension.class)
- 2增强Java技能：使用OkHttp下载www.dianping.com信息
- 3吴恩达深度学习笔记(67)-迁移学习（Transfer learning)_吴恩达迁移学习
- 4从零本地部署大模型（零基础友好版）
- 5docker-compose编排wordpress博客
- 6借助 AI 梳理知识：Quivr 帮你打造第二大脑 | 开源日报 No.103_quivr大脑是什么意思
- 7元路径解析
- 8Transformer中的encoder与decoder
- 9[毕业设计]2023-2024年最新最全人工智能专业毕设选题精选推荐汇总
- 10hanlp 训练模型_五款中文分词工具在线PK: Jieba, SnowNLP, PkuSeg, THULAC, HanLP
当前位置: article > 正文
微信小程序实现骨架屏和图片懒加载_ 作者：weixin_40725706 | 2024-03-27 02:29:23 赞
踩
赞
踩
前言概述
由于常用的getBoundingClientRect()会导致页面重排和滚动事件频发触发，所以本文介绍的是使用IntersectionObserver对象实现图片懒加载效果；并在显示图片前增加骨架屏来提高体验。
Tips：
骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容；
懒加载简单说就是在渲染页面时，不在视图范围内的不加载，只有元素出现在视图范围内了再渲染。
效果如下：
实现过程
一、懒加载功能
1. 文件imgsList.wxml和imgsList.wxss代码如下，这一块比较简单，可自行查看，不做过多分析；
- <view class="imgs-box">
- <block wx:for="{{imgs}}" wx:key="id">
- <image class="img-{{index}}" src="{{item.showState? item.src: ''}}"></image>
- </block>
- </view>
- .imgs-box image {
- width: 100%;
- height: 500rpx;
- }
2. 文件imgsList.js存放所有功能的逻辑代码，代码实现如下：
页面加载时（onLoad）,遍历所有图片数据（imgs）,只要intersectionRatio大于0（即该图片元素出现在视图中），就局部setData该图片数据显示。
- Page({
- /**
- * 页面的初始数据
- */
- data: {
- imgs: [{
- id: 0,
- src: '../../upload/1.jpg',
- showState: false
- },
- {
- id: 1,
- src: '../../upload/2.jpg',
- showState: false
- },
- {
- id: 2,
- src: '../../upload/3.jpg',
- showState: false
- },
- {
- id: 3,
- src: '../../upload/4.jpg',
- showState: false
- },
- {
- id: 4,
- src: '../../upload/5.jpg',
- showState: false
- },
- {
- id: 5,
- src: '../../upload/6.jpg',
- showState: false
- },
- {
- id: 6,
- src: '../../upload/7.jpg',
- showState: false
- },
- {
- id: 7,
- src: '../../upload/8.jpg',
- showState: false
- },
- {
- id: 8,
- src: '../../upload/9.jpg',
- showState: false
- },
- {
- id: 9,
- src: '../../upload/10.jpg',
- showState: false
- }
- ]
- },
-
- /**
- * 生命周期函数--监听页面加载
- */
- onLoad: function (options) {
- let data = this.data.imgs;
- let that = this;
- data.forEach((item, index) => {
- const viewPort = wx.createIntersectionObserver().relativeToViewport();
- viewPort.observe(`.img-${index}`,res=>{
- if (res.intersectionRatio > 0){
- let keyStr = `imgs[${index}].showState`;
- that.setData({
- [keyStr]: true
- })
- }
- })
- })
- }
- })
二、骨架屏
利用微信小程序开发工具自动生成骨架屏代码的能力来实现功能。
1）如上图，点击模拟器面板右下角三点处；
2）点击生成骨架屏，将有弹窗提示是否允许插入骨架屏代码。确定后将在当前页面同级目录下生成imgsList.skeleton.wxml和 imgsList.skeleton.wxss两个文件，分别为骨架屏代码的模板和样式；
3）imgsList.wxml引入骨架屏模板，并增加hideContainer判断内容的隐藏和显示；
- <!-- 引入骨架屏 -->
- <import src="imgsList.skeleton.wxml"/>
- <template is="skeleton" wx-if="{{loading}}" data="{{hideContainer}}" />
-
- <view class="imgs-box" data-skeleton-hide="hideContainer" hidden="{{!hideContainer}}">
- <block wx:for="{{imgs}}" wx:key="id">
- <image class="img-{{index}}" src="{{item.showState? item.src: ''}}"></image>
- </block>
- </view>
4）imgsList.wxss引入骨架屏样式；
- @import "./imgsList.skeleton.wxss";
-
- .imgs-box image {
- width: 100%;
- height: 500rpx;
- }
5）imgsList.js增加参数loading和hideContainer；
- Page({
- /**
- * 页面的初始数据
- */
- data: {
- loading: true,
- hideContainer: false,
- imgs: [{
- id: 0,
- src: '../../upload/1.jpg',
- showState: false
- },
- {
- id: 1,
- src: '../../upload/2.jpg',
- showState: false
- },
- {
- id: 2,
- src: '../../upload/3.jpg',
- showState: false
- },
- {
- id: 3,
- src: '../../upload/4.jpg',
- showState: false
- },
- {
- id: 4,
- src: '../../upload/5.jpg',
- showState: false
- },
- {
- id: 5,
- src: '../../upload/6.jpg',
- showState: false
- },
- {
- id: 6,
- src: '../../upload/7.jpg',
- showState: false
- },
- {
- id: 7,
- src: '../../upload/8.jpg',
- showState: false
- },
- {
- id: 8,
- src: '../../upload/9.jpg',
- showState: false
- },
- {
- id: 9,
- src: '../../upload/10.jpg',
- showState: false
- }
- ]
- },
-
- /**
- * 生命周期函数--监听页面加载
- */
- onLoad: function (options) {
- let data = this.data.imgs;
- let that = this;
- data.forEach((item, index) => {
- const viewPort = wx.createIntersectionObserver().relativeToViewport();
- viewPort.observe(`.img-${index}`,res=>{
- if (res.intersectionRatio > 0){
- let keyStr = `imgs[${index}].showState`;
- that.setData({
- [keyStr]: true,
- loading: false,
- hideContainer: true
- })
- }
- })
- })
- }
- })
6）生成的imgsList.skeleton.wxml添加hidden="{{hideContainer}}"，用来判断骨架屏的显示和隐藏；
- <!--
- 使用方法：
- 在 pages\imgsList\imgsList.wxml 引入模板
- ```
- <import src="imgsList.skeleton.wxml"/>
- <template is="skeleton" wx-if="{{loading}}" />
- ```
- 在 pages\imgsList\imgsList.wxss 中引入样式
- ```
- @import "./imgsList.skeleton.wxss";
- ```
- 更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
- -->
- <template name="skeleton">
- <view class="sk-container" hidden="{{hideContainer}}">
- <view class="imgs-box">
- <image class="img-0 sk-image">
- </image>
- <image class="img-1 sk-image">
- </image>
- <image class="img-2 sk-image">
- </image>
- </view>
- <view class="sk-loading-spinner">
- <view class="circular">
- </view>
- </view>
- </view>
- </template>
7）生成的imgsList.skeleton.wxss样式如下：
- /*
- 在 pages\imgsList\imgsList.wxss 中引入样式
- ```
- @import "./imgsList.skeleton.wxss";
- ```
- 更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
- */
- .sk-image {
- background: #EFEFEF !important;
- }
- .sk-container {
- background-color: transparent;
- }
-
- @keyframes loading-rotate {
- 100% {
- transform: rotate(360deg);
- }
- }
-
- .sk-loading-spinner {
- position: absolute;
- top: 50%;
- margin-top: -0.5rem;
- width: 100%;
- text-align: center;
- }
-
- .sk-loading-spinner .circular {
- border-radius: 50%;
- width: 1rem;
- height: 1rem;
- display: inline-block;
- box-sizing: border-box;
- border-top: solid 2px #409eff;
- border-right: solid 2px #409eff;
- border-bottom: solid 2px #409eff;
- border-left: solid 2px transparent;
- animation: loading-rotate 1s linear infinite;
- }
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/321296
推荐阅读
相关标签
