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

server/2024/9/24 4:26:21/

小程序>微信小程序中,有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/server/62271.html

相关文章

运维检查:mysql表自增id是否快要用完

数据库表中最大自增ID用完会报错。判断是否接近或达到自增ID类型的最大值&#xff1a;‌ 对于MySQL中的自增ID&#xff0c;‌如果使用的是int类型&#xff0c;‌其无符号&#xff08;‌unsigned&#xff09;‌的最大值可以达到2^32 - 1&#xff0c;‌即4294967295。‌如果使用的…

sentinel源码分析: dashboard与微服务的交互、pull模式持久化

文章目录 原始方式微服务端规则如何保存规则如何加载进内存微服务端接收控制台请求控制台推送规则总结 pull拉模式官方demo如何整合Spring Cloud整合Spring Cloud 前置知识 SentinelResource的实现原理、SphU.entry()方法中ProcessorSlotChain链、entry.exit() 建议先会使用se…

HDFS 块重构和RedundancyMonitor详解

文章目录 1. 前言2 故障块的重构(Reconstruct)2.1 故障块的状态定义和各个状态的统计信息2.2 故障文件块的查找收集2.2.1 Mis Replica的检测2.2.2 延迟队列(postponedMisreplicatedBlocks)的构造和实现向postponedMisreplicatedBlocks中添加Block从postponedMisreplicatedBlock…

P2p网络性能测度及监测系统模型

P2p网络性能测度及监测系统模型 网络IP性能参数 IP包传输时延时延变化误差率丢失率虚假率吞吐量可用性连接性测度单向延迟测度单向分组丢失测度往返延迟测度 OSI中的位置-> 网络层 用途 面相业务的网络分布式计算网络游戏IP软件电话流媒体分发多媒体通信 业务质量 通过…

玩转HarmonyOS NEXT之IM应用首页布局

本文从目前流行的垂类市场中&#xff0c;选择即时通讯应用作为典型案例详细介绍HarmonyOS NEXT的各类布局在实际开发中的综合应用。即时通讯应用的核心功能为用户交互&#xff0c;主要包含对话聊天、通讯录&#xff0c;社交圈等交互功能。 应用首页 创建一个包含一列的栅格布…

【Oracle】实验三 Oracle数据库的创建和管理

【实验目的】 掌握Oracle数据库的创建方法使用DBCA创建数据库在数据库中装入SCOTT用户及其表 【实验内容】 使用DBCA创建数据库&#xff0c;名为MYDB&#xff0c;找到其初始化文件(文本型和服务器型文件都要找到)&#xff0c;查看各类默认位置并记录下来(包括物理文件所在目…

Perl高手秘籍:自定义操作符的炼金术

&#x1f31f; Perl高手秘籍&#xff1a;自定义操作符的炼金术 Perl是一种极其灵活的编程语言&#xff0c;它不仅支持内置的操作符&#xff0c;还允许开发者定义自己的操作符。自定义操作符可以极大地增强Perl代码的表达力和功能性。本文将深入探讨如何在Perl中定义自定义操作…

超市管理系统 需求分析与设计 UML 方向

一、项目介绍 1.1项目背景 随着经济一体化和电子商务的迅速发展&#xff0c;网络传播信息的速度打破了传统信息传递的模式&#xff0c;互联网的高速发展和计算机应用在各个高校进展迅速&#xff0c;更多信息化产品的突飞猛进&#xff0c;让现代的管理模式也发生了巨大的变化&…