首页 > 其他分享 >uniapp 图片懒加载的一种方式

uniapp 图片懒加载的一种方式

时间:2023-12-07 18:00:25浏览次数:36  
标签:uniapp pageSize allArr pQuery length let take 加载 图片

如果是列表页,可以采用前端分页,通过scroll-view 下拉,在绑定图片地址信息,这样就能下拉部分,加载部分图片了。

pageQuery()
            {
                let currentPage = this.pQuery.page;

                let pageSize = this.pQuery.size;
                const index = (currentPage - 1) * pageSize;
                let allArr = this.allEmps;
                let take = currentPage * pageSize;
                if (take > allArr.length)
                {
                    take = allArr.length;
                }
                if (this.pageEmps.length < allArr.length)
                {
                    this.pageEmps = this.pageEmps.concat(allArr.slice(index, take));
                    this.pQuery.page++;
                }
            },

 

标签:uniapp,pageSize,allArr,pQuery,length,let,take,加载,图片
From: https://www.cnblogs.com/HelloQLQ/p/17883592.html

相关文章

  • captcha模块——生成图片验证码
    安装captcha库pipinstallcaptcha 基本使用方法(生成图片验证码)importcaptchafromcaptcha.imageimportImageCaptcha#设置图片宽高image=ImageCaptcha(width=200,height=100)#验证码内容captcha_text='1234'#验证码写入图片captcha_image=image.g......
  • uniapp---wap2app去掉系统自带的导航栏
    在用uniapp进行将wap站转化为app的时候,默认打包后的文件,带有系统的导航栏,下面是去除的办法:第一步:找到sitemap.json 设置titleNView为false: 第二步:在pages加入{"webviewId":"common","matchUrls":[{"hostname":"R:.*","pa......
  • 在输入框里直接粘贴图片
    有很多Web编辑器支持直接复制粘贴图片,记录一下这种效果是怎么实现的拿到粘贴板上的imagefile对象document.querySelector('textarea').addEventListener('paste',e=>{constfile=Array.from(e.clipboardData.items).find(v=>v.type.includes('image'))......
  • uniapp之合并行表格
    前言此文旨在记录微信小程序中需要使用合并表头的需求场景,由于此项目使用的是Uniapp和uView这两个UI框架。然后接到一个需要查成绩的需求,表头大概长这样:碰到问题然后我惊奇的发现uniapp的table组件压根没有封装tr和td的rowspan属性,uView更是直接没有table组件。......
  • 关于uniapp打包APP自定义基座调试,遇到首页同意网络权限后白屏问题
    解决方案:1、在App.vue文件中,onShow生命周期内添加一段代码,检测是否同意使用互联网权限:uni.onNetworkStatusChange(function(res){ console.log('onNetworkStatusChange',res); if(res.isConnected){ setTimeout(()=>{ uni.reLaunch({ url:'/pages/......
  • uniapp tabbar权限问题
    在app.vue里添加:exportdefault{//在此处添加一个函数globalData:{//更改tabbar权限reviseTabbarByUserType:function(){//可以写自己的逻辑代码//letusername=uni.getStorageSync('login_user_......
  • python多线程下载图片
    urls.json文件数据格式如下["https://example.com/image1.jpg","https://example.com/image2.jpg","https://example.com/image3.jpg"] 代码如下importjsonimportrequestsimportthreadingdefdownload_image(url):respo......
  • uniapp下拉刷新
    UniApp是一个基于Vue.js开发的跨平台应用框架,它可以帮助开发者使用Vue.js开发一次,即可在多个平台上进行部署,如iOS、Android、H5等。UniApp中提供了下拉刷新功能,开发者可以通过以下步骤来实现:在页面中添加<uni-refresher>组件,该组件是下拉刷新功能的容器。html复制代码......
  • uniapp打包iOS应用并通过审核:代码混淆的终极解决方案 ✨
    摘要本篇博客将教你如何使用JavaScript-obfuscator插件来一键发行和混淆iOS上的uniapp代码。通过安装插件、创建运行脚本,并执行混淆操作,你将能够轻松通过审核,提高应用程序的安全性。......
  • uniapp小程序与H5之间的通信
    一、小程序端向H5传递参数这个比较简单,就是利用web-view的src传递就行1、创建承载web-view的.vue页面,代码如下:<template><view><web-view:src="src"@message="handleMessage"></web-view></view></template><script>......