热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信小程序懒加载

今天给大家带来小程序懒加载的办法,来提高页面的体验性。理念:加入滚动,当页面滚动的时候计算列表数据的高度来判断该区域数据图片是否加载显示1.首先我们要在wxml要显示的列表里加入滚动条<scro

今天给大家带来小程序懒加载的办法,来提高页面的体验性。

理念:加入滚动,当页面滚动的时候计算列表数据的高度来判断该区域数据图片是否加载显示

1.首先我们要在wxml要显示的列表里加入滚动条



然后。。。

wxml:



autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" class="newCourse_bann">















店铺推荐








{{item.title}}



¥{{item.marketprice}}
淘宝价:{{item.productprice}}元









核心js代码:


//计算窗口高度
wx.getSystemInfo({
success: function(res) {
self.setData({
clientHeight: res.windowHeight
});
}
})

//高度算法 
var arr = [];
var length = Array.from(res.data.data).length;
var isD = length % 2 == 0 ? true : false ;
var arrHight = [];
for(var i = 0; i arr[i] = false;
arrHight[i] = Math.floor(i/2)*(320/750)*520;
for (var i = 0; i 

scroll: function(e){
var seeHeight = this.data.clientHeight; //可见区域高度
var arrHight = this.data.arrHight;
var event = e;
var scrollTop = event.detail.scrollTop;
var arr = this.data.arr;
// console.log(scrollTop)
for (var i = 0; i if (arrHight[i] if (arr[i] == false) {
arr[i] = true;
// arr[i*2] arr[i*2+1]
}
//n = i + 1;
}
//arr[i] = true;
}
this.setData({
arr : arr
})
}

完整js:

var app = getApp();
Page({
data: {
GZtate: true,
// 轮播
imgUrls: [
'/we7_wxappdemo/resource/images/lunbo1.jpg',
'/we7_wxappdemo/resource/images/lunbo2.jpg',
'/we7_wxappdemo/resource/images/lunbo3.jpg'
],
indicatorDots: false,
interval: 5000,
duration: 1000,
autoplay: true,
// over

list:[],

clientHeight:0, arr:[], arrHight:[]
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
const self = this;
wx.getSystemInfo({
success: function (res) {
self.setData({
clientHeight: res.windowHeight
});
}
})
// console.log(options)
var tarrHight = [];
app.util.request({
'url': 'entry/wxapp/list',
data: {
category: options.category ? options.category : '',
},
'cachetime': '30',
success(res) {
//console.log(res);
self.setData({
list: res.data.data
})
//
var arr = [];
var length = Array.from(res.data.data).length;
var isD = length % 2 == 0 ? true : false;

for (var i = 0; i arr[i] = false;
tarrHight[i] = Math.floor(i / 2) * (320 / 750) * 520;
}

self.setData({
arr: arr,
list: Array.from(res.data.data),
arrHight: tarrHight
})
// console.log(self.data.arr)
//
},
})
for (var i = 0; i if (tarrHight[i] if (arr[i] == false) {
arr[i] = true;
}
}
}
// 上拉加载
//点击搜索按钮,触发事件
self.setData({
listPageNum: 1, //第一次加载,设置1
List: [], //放置返回数据的数组,设为空
isFromlist: true, //第一次加载,设置true
listLoading: true, //把"上拉加载"的变量设为true,显示
listLoadingComplete: false //把“没有数据”设为false,隐藏
})
self.fetchlist();

},
scroll: function (e) {
//console.log(this.data);
var seeHeight = this.data.clientHeight; //可见区域高度
var arrHight = this.data.arrHight;
var event = e;
var scrollTop = event.detail.scrollTop;
var arr = this.data.arr;
// console.log(scrollTop)
for (var i = 0; i if (arrHight[i] if (arr[i] == false) {
arr[i] = true;
// arr[i*2] arr[i*2+1]
}
//n = i + 1;
}
//arr[i] = true;
}
this.setData({
arr: arr,
scrollTop:scrollTop
})
},

效果图:





推荐阅读
  • 尽管在WPF中工作了一段时间,但在菜单控件的样式设置上遇到了一些基础问题,特别是关于如何正确配置前景色和背景色。 ... [详细]
  • 本文详细介绍了PHP中的几种超全局变量,包括$GLOBAL、$_SERVER、$_POST、$_GET等,并探讨了AJAX的工作原理及其优缺点。通过具体示例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • 使用 ModelAttribute 实现页面数据自动填充
    本文介绍了如何利用 Spring MVC 中的 ModelAttribute 注解,在页面跳转后自动填充表单数据。主要探讨了两种实现方法及其背后的原理。 ... [详细]
  • 笔记说明重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系& ... [详细]
  • 本文探讨了一个Web工程项目的需求,即允许用户随时添加定时任务,并通过Quartz框架实现这些任务的自动化调度。文章将介绍如何设计任务表以存储任务信息和执行周期,以及如何通过一个定期扫描机制自动识别并加载新任务到调度系统中。 ... [详细]
  • This article explores the process of integrating Promises into Ext Ajax calls for a more functional programming approach, along with detailed steps on testing these asynchronous operations. ... [详细]
  • Android 开发技巧:使用 AsyncTask 实现后台任务与 UI 交互
    本文详细介绍了如何在 Android 应用中利用 AsyncTask 来执行后台任务,并及时将任务进展反馈给用户界面,提高用户体验。 ... [详细]
  • 本文探讨了如何利用 Android 的 Movie 类来展示 GIF 动画,并详细介绍了调整 GIF 尺寸以适应不同布局的方法。同时,提供了相关的代码示例和注意事项。 ... [详细]
  • 本文介绍了如何使用 Python 的 Pyglet 库加载并显示图像。Pyglet 是一个用于开发图形用户界面应用的强大工具,特别适用于游戏和多媒体项目。 ... [详细]
  • 本文分享了作者在使用LaTeX过程中的几点心得,涵盖了从文档编辑、代码高亮、图形绘制到3D模型展示等多个方面的内容。适合希望深入了解LaTeX高级功能的用户。 ... [详细]
  • 【MySQL】frm文件解析
    官网说明:http:dev.mysql.comdocinternalsenfrm-file-format.htmlfrm是MySQL表结构定义文件,通常frm文件是不会损坏的,但是如果 ... [详细]
  • 服务器虚拟化存储设计,完美规划储存与资源,部署高性能虚拟化桌面
    规划部署虚拟桌面环境前,必须先估算目前所使用实体桌面环境的工作负载与IOPS性能,并慎选储存设备。唯有谨慎估算贴近实际的IOPS性能,才能 ... [详细]
  • 在Android中实现黑客帝国风格的数字雨效果
    本文将详细介绍如何在Android平台上利用自定义View实现类似《黑客帝国》中的数字雨效果。通过实例代码,我们将探讨如何设置文字颜色、大小,以及如何控制数字下落的速度和间隔。 ... [详细]
  • 本文详细介绍如何在 Apache 中设置虚拟主机,包括基本配置和高级设置,帮助用户更好地理解和使用虚拟主机功能。 ... [详细]
  • Vue CLI 基础入门指南
    本文详细介绍了 Vue CLI 的基础使用方法,包括环境搭建、项目创建、常见配置及路由管理等内容,适合初学者快速掌握 Vue 开发环境。 ... [详细]
author-avatar
gigi-dd
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有