微信小程序之使用上拉加载实现图片懒加载

news/2024/9/10 10:18:03/ 标签: 微信小程序, notepad++, 小程序

在小程序>微信小程序中，有2个事件，相信大家都很熟悉
下拉重新加载
上拉加载更多
事件是这么个事件，至于事件触发后干嘛，那就看代码了
首先要在对应得地方xxxxpage.json打开这个

  "onReachBottomDistance": 100

至于这个值100还是多少要看你的实际情况，为了不让用户看到默认的框框啥的，应该是设置大一些！
xxxpage.js中

  onReachBottom(){//组件的class="lazyimage"var child =this.selectComponent('.lazyimage');if(child){child.onScrollIndex();//告知懒加载组件，触发了上拉触底事件}else{console.log(this);}}

然后就是我们的组件代码了 比如命名为lazyimage
lazyimage.js

// components/goodsParse/goodsParse.js
Component({/*** 组件的属性列表*/properties: {parseData: {type: Array,value: []},param: {type: String},scrollindex:{type:Number,value:0,default:0},lazyload:{type:Boolean,value:false}},/*** 组件的初始数据*/data: {imageCount: 0,imagedatas:[],loadcount:0,current_load_height:0,//本次渲染的图片的总高度 如果本次渲染的总高度不足1500 则会再次渲染per_load_countcurrent_loaded_ok:false,//本次是否渲染完成per_load_min_height:1500,//每次至少渲染多少高度per_load_count:3//每次渲染的张数，如果渲染的总高度不足，会继续渲染},/*** 组件的方法列表*/methods: {handleImgtap() {},onImageLoad(e) {this.data.imageCount ++//又不用渲染UI 所以下面的代码没必要// this.setData({//   imageCount: this.data.imageCount// })if(e.detail){if(e.detail.height){//本张图片渲染的高度this.data.current_load_height+=e.detail.height;}}if(this.data.lazyload){//本次懒加载的图片已经加载完成了if(this.data.imageCount == this.data.loadcount){this.data.current_loaded_ok=true;this.triggerEvent('onImageLoad', this.data.imageCount);//未完待续 如果还可以继续加载，如果刚刚加载的总高度小于屏幕的总高度，则继续贪婪加载if(this.data.current_load_height<this.data.per_load_min_height){//本次渲染的高度太小了，看看是否可以继续渲染，再次渲染3张this.loadNext(this.data.per_load_count);}}}else{//非懒加载if(this.data.imageCount == this.data.imagedatas.length){this.triggerEvent('onImageLoad', this.data.imageCount);}}//如果渲染不够，还可以继续渲染// console.log(e);//可以通过e来计算本次加载是否足够，不够的话补足剩余的数量},loadNext(num){if(this.data.loadcount<this.data.imagedatas.length){//渲染接下来的N个？var _max = this.data.imagedatas.length;if(this.data.loadcount<(_max)){this.data.current_load_height=0;var _temptop = Math.min(this.data.loadcount+num,(_max));// console.log('loadcount',this.data.loadcount,'images',this.data.imagedatas.length,'temp',_temptop);if(_temptop>this.data.loadcount){var _new_array=new Array();var _datas =this.data.imagedatas;for(var k=this.data.loadcount;k<_temptop;k++){if(this.data.imagedatas.length>k){_new_array.push({vkey:'imagedatas['+k+'].src',src:_datas[k].presrc});}}if(_new_array.length>0){var _obj={};for(var ii of _new_array){_obj[ii.vkey]=ii.src}this.setData(_obj);// console.log('set new images src!');}this.data.loadcount = _temptop;}}}},onScrollIndex(){//这个函数是给外部调用的，一般发生在上拉触底(要基于实际去设定这个高度值)的时候if(this.data.imagedatas.length ==this.data.loadcount){// console.log('已经全部完成渲染，无法继续执行更多的懒加载');//已经全部懒加载完成，不需要继续加载了return;}if(!this.data.current_loaded_ok){// console.log('上一次的渲染未完成··· ·· ·');return;}// console.log('parent`s scroll-view scroll to lower!');if(this.data.imageCount<this.data.loadcount){// console.log('之前加载的图片还未完全加载完成');return;}this.loadNext(this.data.per_load_count);},requireLoadAll(){//父级页面要求加载全部if(this.data.loadcount != this.data.imagedatas.length){var _n = this.data.imagedatas.length-this.data.loadcount;if(_n>0){if(!this.data.current_loaded_ok){// console.log('上一次的渲染未完成··· ·· ·');return;}// console.log('parent`s scroll-view scroll to lower!');if(this.data.imageCount<this.data.loadcount){// console.log('之前加载的图片还未完全加载完成');return;}this.loadNext(_n);}}}},attached(){// console.log('load goods-parse attached!');var _lazyload=this.data.lazyload;if(this.data.parseData!=null && this.data.parseData.length>0){var _imgarray=new Array();var _i =0;for(var img of this.data.parseData){_i ++;if(_i<= this.data.per_load_count || !_lazyload){_imgarray.push({src:img,presrc:img});}else{_imgarray.push({src:null,presrc:img});}}this.data.loadcount =this.data.per_load_count;//当前有渲染的序号this.setData({imagedatas:_imgarray});console.log(_imgarray);}}
})

对应的lazyimage.wxml代码如下(这个看你的实际情况修改)

<view class="parse_box"><block ><view class="u-padding-top-10" style="font-size:0px;"><block wx:if="{{parseData}}"><view><block wx:for="{{imagedatas}}" wx:for-item="item" wx:for-index="index" wx:key="index"><block wx:if="{{item.src}}"><image class="parse_image" src="{{item.src}}" mode="widthFix" bindload="onImageLoad" binderror="onImageLoad"/></block></block></view></block></view></block>
</view>

至于样式就不贴了！
这个组件适用于单图横向100vw的模式，比如商品的图片列表纵向显示
关键点在于
图片数据是parseData
比如:
[“https://xxx.jpg”,“https://xxx.jpg”]
转化成imagedatas
比如
[{
presrc:“”,
src:null
}]
除了一开始的数量设置src为对应的图片地址，后面的都是设置null
然后在上拉触底事件触发的时候，再把后面的图片对象设置src=presrc！

然后就是高度的判断，有可能比如你配置每次加载3张图，如果这三张图的高度不够一屏，那体验上用户就能看到图片还在加载了！
所以代码上做了一个贪婪模式，就是图片load后，去计算本次加载的总高度，是否满足，不够的话再多懒加载一次！
看函数代码

 onImageLoad(e) {this.data.imageCount ++//又不用渲染UI 所以下面的代码没必要// this.setData({//   imageCount: this.data.imageCount// })if(e.detail){if(e.detail.height){//本张图片渲染的高度this.data.current_load_height+=e.detail.height;}}if(this.data.lazyload){//本次懒加载的图片已经加载完成了if(this.data.imageCount == this.data.loadcount){this.data.current_loaded_ok=true;this.triggerEvent('onImageLoad', this.data.imageCount);//未完待续 如果还可以继续加载，如果刚刚加载的总高度小于屏幕的总高度，则继续贪婪加载if(this.data.current_load_height<this.data.per_load_min_height){//本次渲染的高度太小了，看看是否可以继续渲染，再次渲染3张this.loadNext(this.data.per_load_count);}}}else{//非懒加载if(this.data.imageCount == this.data.imagedatas.length){this.triggerEvent('onImageLoad', this.data.imageCount);}}//如果渲染不够，还可以继续渲染// console.log(e);//可以通过e来计算本次加载是否足够，不够的话补足剩余的数量},

http://www.ppmy.cn/news/1474630.html

相关文章

SpringSecurity 三更草堂学习笔记

SpringSecurity 三更草堂学习笔记

0.简介 Spring Security是Spring家族中的一个安全管理框架。相比与另外一个安全框架Shiro&#xff0c;它提供了更丰富的功能&#xff0c;社区资源也比Shiro丰富。 一般来说中大型的项目都是使用SpringSecurity来做安全框架。小项目有Shiro的比较多&#xff0c;因为相比与Spring…
阅读更多...
合并pdf的方法，如何合并pdf文件到一个pdf，简单方法

合并pdf的方法，如何合并pdf文件到一个pdf，简单方法

在现代办公和学习中&#xff0c;pdf格式的文件因其跨平台兼容性和安全性得到了广泛应用。然而&#xff0c;有时我们需要将多个pdf文件合并成一个&#xff0c;以便于管理和分享。本文将详细介绍几种合并pdf的方法&#xff0c;帮助读者轻松完成pdf文件的合并工作。 方法一、使用p…
阅读更多...
urlib Python爬虫

urlib Python爬虫

要使用Python进行爬虫&#xff0c;可以使用Python自带的urllib库。 urllib是Python内置的HTTP请求库&#xff0c;用于发送HTTP请求、处理响应和处理URL编码等任务。它提供了很多方法和函数&#xff0c;可以方便地进行网络数据的获取和处理&#xff0c;因此在Python爬虫中被广泛…
阅读更多...
极速目标检测：算法加速的策略与实践

极速目标检测：算法加速的策略与实践

标题&#xff1a;极速目标检测&#xff1a;算法加速的策略与实践 目标检测算法在计算机视觉任务中扮演着重要角色&#xff0c;但其计算成本往往较高。优化目标检测算法的速度&#xff0c;不仅可以提升效率&#xff0c;还能使算法适用于实时系统。本文将深入探讨如何优化目标检…
阅读更多...
JS进阶-解析赋值

JS进阶-解析赋值

学习目标&#xff1a; 掌握解析赋值 学习内容&#xff1a; 解构赋值数组解构对象解构筛选数组filter方法&#xff08;重点&#xff09; 解构赋值&#xff1a; 解构赋值是一种快速为变量赋值的简洁语法&#xff0c;本质上仍然是为变量赋值。 分为&#xff1a; 数组解构对象解…
阅读更多...
Android 性能优化之启动优化

Android 性能优化之启动优化

文章目录 Android 性能优化之启动优化启动状态冷启动温启动热启动 耗时检测检测手段TraceView使用方式缺点 Systrace环境配置使用方式TraceView和Systrace比较 AOP统计耗时环境配置使用 优化白屏优化异步加载优化环境配置使用 延迟加载优化AppStartup 源码下载 Android 性能优化…
阅读更多...
Apache Web安全分析与增强

Apache Web安全分析与增强

Apache HTTP Server 概述 Apache HTTP Server（通常简称为Apache）是一个开源的Web服务器软件，由Apache软件基金会开发和维护。它是全球使用最广泛的Web服务器之一，支持多种操作系统，包括Unix、Linux、Windows和Mac OS X。以下是Apache Web服务器的详细概述，包括其功能特点…
阅读更多...
阿里巴巴矢量图标库使用

阿里巴巴矢量图标库使用

阿里巴巴矢量图标库官网 添加图标到购物车 悬浮到图标上面会有个购物车icon,点击一下就可以添加购物车了 添加图标到项目 添加完购物车后,右上角会有当前在购物车的数量,点击右上角购物车icon,在新弹窗内点击添加至项目,选择添加到哪个项目(没有项目就创建一个),点击完成,…
阅读更多...
PostgreSQL的使用

PostgreSQL的使用

PostgreSQL的使用 1.首先&#xff0c;使用docker进行安装pgvector数据库&#xff0c;具体的安装步骤可以查看我之前发的博文。 2.docker exec -it pgvector /bin/bash 进入docker容器内部&#xff0c;操作数据库&#xff0c;上述命令是以交互式命令进入了容器的内部&#xf…
阅读更多...
View-＞裁剪框View的绘制，手势处理

View-＞裁剪框View的绘制，手势处理

XML文件 <?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android…
阅读更多...
100 个网络基础知识普及，看完成半个网络高手！

100 个网络基础知识普及，看完成半个网络高手！

1&#xff09;什么是链接&#xff1f; 链接是指两个设备之间的连接。它包括用于一个设备能够与另一个设备通信的电缆类型和协议。 2&#xff09;OSI 参考模型的层次是什么&#xff1f; 有 7 个 OSI 层&#xff1a;物理层&#xff0c;数据链路层&#xff0c;网络层&#xff0…
阅读更多...
lua 脚本语言 : 基础到高级语法

lua 脚本语言 : 基础到高级语法

❃博主首页 &#xff1a; 「码到三十五」 &#xff0c;同名公众号 :「码到三十五」&#xff0c;wx号 : 「liwu0213」 ☠博主专栏 &#xff1a; <mysql高手> <elasticsearch高手> <源码解读> <java核心> <面试攻关> ♝博主的话 &#xff1a…
阅读更多...
ARM功耗管理之唤醒源与组合唤醒源

ARM功耗管理之唤醒源与组合唤醒源

安全之安全(security)博客目录导读 思考&#xff1a;什么是睡眠锁&#xff1f;什么是唤醒源&#xff1f;什么是组合唤醒源&#xff1f; DynamIQ系统下的唤醒源 Redistributor中包含了一个GICR_WAKER寄存器&#xff0c;用于记录connected PE的状态是onLine还是offline. 如果让P…
阅读更多...
jitsi 使用JWT验证用户身份

jitsi 使用JWT验证用户身份

前言 Jitsi Meet是一个很棒的会议系统，但是默认他运行所有人创建会议，这样在某种程度上，我们会觉得他不安全，下面我们就来介绍下使用JWT来验证用户身份 方案 卸载旧的lua依赖性sudo apt-get purge lua5.1 liblua5.1-0 liblua5.1-dev luarocks添加ubuntu的依赖源，有则不需…
阅读更多...
硬件开发工具Arduino IDE

硬件开发工具Arduino IDE

招聘信息共享社群 关联上篇文章乐鑫ESPRESSIF芯片开发简介 Arduino IDE&#xff08;集成开发环境&#xff09;是为Arduino硬件开发而设计的一款软件&#xff0c;它提供了一个易于使用的图形界面&#xff0c;允许用户编写、编辑、编译和上传代码到Arduino开发板。Arduino IDE的…
阅读更多...
Kubernetes基于helm部署jenkins

Kubernetes基于helm部署jenkins

Kubernetes基于helm安装jenkins jenkins支持war包、docker镜像、系统安装包、helm安装等。在Kubernetes上使用Helm安装Jenkins可以简化安装和管理Jenkins的过程。同时借助Kubernetes&#xff0c;jenkins可以实现工作节点的动态调用伸缩&#xff0c;更好的提高资源利用率。通过…
阅读更多...
django后台定制

django后台定制

Django 后台&#xff08;Admin&#xff09;是一个强大的工具&#xff0c;用于管理 Django 项目中的数据模型。然而&#xff0c;默认的 Django Admin 可能无法满足所有项目的需求&#xff0c;因此经常需要进行定制。以下是一些关于 Django 后台定制的推荐、介绍以及技术实现的建…
阅读更多...
自动驾驶中，实现三维点旋转原理

自动驾驶中，实现三维点旋转原理

文章目录 1. 三维点旋转的方案2. 使用复数表示二维点的旋转2.1. 复数的概念2.2. 复数的三种形式及相互转换2.3. 复数概念扩展&#xff1a;实数、虚数、复数 3. 四元数旋转三维点原理4. 使用四元数进行旋转的公式5. 旋转叠加6. 四元数转换为三维点7. 代码实现 1. 三维点旋转的方…
阅读更多...
ElasticSearch第一天

ElasticSearch第一天

学习目标&#xff1a; 能够理解ElasticSearch的作用能够安装ElasticSearch服务能够理解ElasticSearch的相关概念能够使用Postman发送Restful请求操作ElasticSearch能够理解分词器的作用能够使用ElasticSearch集成IK分词器能够完成es集群搭建 第一章 ElasticSearch简介 1.1 什么…
阅读更多...
kubernetes集群部署：node节点部署和cri-docker运行时安装（四）

kubernetes集群部署：node节点部署和cri-docker运行时安装（四）

安装前准备 同《kubernetes集群部署&#xff1a;环境准备及master节点部署&#xff08;二&#xff09;》 安装cri-docker 在 Kubernetes 1.20 版本之前&#xff0c;Docker 是 Kubernetes 默认的容器运行时。然而&#xff0c;Kubernetes 社区决定在 Kubernetes 1.20 及以后的…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站