热门标签 | 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
})
},

效果图:





推荐阅读
  • 过去查询Mysql的时候,都见3306对所有端口开放着,感觉不安全。netstat&nbsp;-anlp&nbsp;|&nbsp;grep&nbsp;mysqltcp&nbsp;0&am ... [详细]
  • 如果应用程序经常播放密集、急促而又短暂的音效(如游戏音效)那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点:1)延时时间较长,且资源占用率高 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 在PHP中如何正确调用JavaScript变量及定义PHP变量的方法详解 ... [详细]
  • 本项目通过Python编程实现了一个简单的汇率转换器v1.02。主要内容包括:1. Python的基本语法元素:(1)缩进:用于表示代码的层次结构,是Python中定义程序框架的唯一方式;(2)注释:提供开发者说明信息,不参与实际运行,通常每个代码块添加一个注释;(3)常量和变量:用于存储和操作数据,是程序执行过程中的重要组成部分。此外,项目还涉及了函数定义、用户输入处理和异常捕获等高级特性,以确保程序的健壮性和易用性。 ... [详细]
  • 二分查找算法详解与应用分析:本文深入探讨了二分查找算法的实现细节及其在实际问题中的应用。通过定义 `binary_search` 函数,详细介绍了算法的逻辑流程,包括初始化上下界、循环条件以及中间值的计算方法。此外,还讨论了该算法的时间复杂度和空间复杂度,并提供了多个应用场景示例,帮助读者更好地理解和掌握这一高效查找技术。 ... [详细]
  • 在对WordPress Duplicator插件0.4.4版本的安全评估中,发现其存在跨站脚本(XSS)攻击漏洞。此漏洞可能被利用进行恶意操作,建议用户及时更新至最新版本以确保系统安全。测试方法仅限于安全研究和教学目的,使用时需自行承担风险。漏洞编号:HTB23162。 ... [详细]
  • [c++基础]STL
    cppfig15_10.cppincludeincludeusingnamespacestd;templatevoidprintVector(constvector&integer ... [详细]
  • [转]doc,ppt,xls文件格式转PDF格式http:blog.csdn.netlee353086articledetails7920355确实好用。需要注意的是#import ... [详细]
  • 思科IOS XE与ISE集成实现TACACS认证配置
    本文详细介绍了如何在思科IOS XE设备上配置TACACS认证,并通过ISE(Identity Services Engine)进行用户管理和授权。配置包括网络拓扑、设备设置和ISE端的具体步骤。 ... [详细]
  • CentOS 7 中 iptables 过滤表实例与 NAT 表应用详解
    在 CentOS 7 系统中,iptables 的过滤表和 NAT 表具有重要的应用价值。本文通过具体实例详细介绍了如何配置 iptables 的过滤表,包括编写脚本文件 `/usr/local/sbin/iptables.sh`,并使用 `iptables -F` 清空现有规则。此外,还深入探讨了 NAT 表的配置方法,帮助读者更好地理解和应用这些网络防火墙技术。 ... [详细]
  • 在 LeetCode 的“有效回文串 II”问题中,给定一个非空字符串 `s`,允许删除最多一个字符。本篇深入解析了如何判断删除一个字符后,字符串是否能成为回文串,并提出了高效的优化算法。通过详细的分析和代码实现,本文提供了多种解决方案,帮助读者更好地理解和应用这一算法。 ... [详细]
  • 本文探讨了在PHP中实现MySQL分页查询功能的优化方法与实际应用。通过详细分析分页查询的常见问题,提出了多种优化策略,包括使用索引、减少查询字段、合理设置缓存等。文章还提供了一个具体的示例,展示了如何通过优化模型加载和分页参数设置,显著提升查询性能和用户体验。 ... [详细]
  • 【问题】在Android开发中,当为EditText添加TextWatcher并实现onTextChanged方法时,会遇到一个问题:即使只对EditText进行一次修改(例如使用删除键删除一个字符),该方法也会被频繁触发。这不仅影响性能,还可能导致逻辑错误。本文将探讨这一问题的原因,并提供有效的解决方案,包括使用Handler或计时器来限制方法的调用频率,以及通过自定义TextWatcher来优化事件处理,从而提高应用的稳定性和用户体验。 ... [详细]
  • 本文介绍如何通过 Python 的 `unittest` 和 `functools` 模块封装一个依赖方法,用于管理测试用例之间的依赖关系。该方法能够确保在某个测试用例失败时,依赖于它的其他测试用例将被跳过。 ... [详细]
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社区 版权所有