云建站的步骤,怎么查icp备案号,爱站工具网,方太产品站网站建设先说使用场景#xff0c;一次加载很多数据造成小程序卡顿的问题 #xff0c;找了好多都没有好的解决办法#xff0c;要么太过复杂#xff0c;然后研究了两天通过简单的办法实现#xff0c;先根据数量把高度撑开#xff0c;然后根据滚动位置渲染指定的数据就可以了#x…先说使用场景一次加载很多数据造成小程序卡顿的问题 找了好多都没有好的解决办法要么太过复杂然后研究了两天通过简单的办法实现先根据数量把高度撑开然后根据滚动位置渲染指定的数据就可以了 性能简直不要太好。先看效果实际业务效果要好于测试效果。 小程序列表性能 DataManage.js 封装
function DataManage() {//**********************************************************数据let Data {dataSource: [],//数据源heatData: [] //热数据(需要渲染的数据)}//**********************************************************配置let BaseConfig { //基本配置信息(不需要覆盖的配置)triggerTime: 0, //滚动时间triggerTop: 0, //滚动top位置voidViewHeight: 0,//虚拟View高度pagingIndex: -1, //切换分页索引dataEnd: -1 //数据结束范围}let PagingConfig { //分页配置(可改变) pageSize: 50, //分页大小cardHeight: 55, //卡片高度pagingBoundary: 20,//切换数据边界值(此值需要小于分页大小)topBoundary: 20, //数据上移边界callback: ,//回调方法debug: false //输出日志}let CallbackFn null //回调方法//**********************************************************内部方法const refreshData (viewData) {//刷新数据Data.heatData viewData.viewListCallbackFn(viewData)}const virtualPaging () {//虚拟分页if (Data.dataSource.length PagingConfig.pageSize) {//不分页处理refreshData({ viewList: Data.dataSource, voidViewHeight: BaseConfig.voidViewHeight, viewListTop: 0 })return;}let currentIndex Math.floor(BaseConfig.triggerTop / PagingConfig.cardHeight)//根据位置计算当前索引值if (BaseConfig.pagingIndex -1 || (currentIndex ! BaseConfig.pagingIndex Math.abs(currentIndex - BaseConfig.pagingIndex) PagingConfig.pagingBoundary)) {//数据范围let dataS currentIndex - PagingConfig.topBoundary 0 ? 0 : currentIndex - PagingConfig.topBoundary//起始位置let dataE dataS PagingConfig.pageSize//结束位置if (Math.abs(Data.dataSource.length - dataE) PagingConfig.pagingBoundary)//避免丢失最后的数据dataE Data.dataSource.lengthif (dataE BaseConfig.dataEnd)//避免总数据量只大于分页数造成的多一次渲染return;//返回后此处会触发多次因为下面的变量没有更新//刷新数据refreshData({viewList: Data.dataSource.slice(dataS, dataE),voidViewHeight: BaseConfig.voidViewHeight,viewListTop: dataS * PagingConfig.cardHeight})//保存此次分页位置 BaseConfig.dataEnd dataEBaseConfig.pagingIndex currentIndex//打印日志if (PagingConfig.debug)console.log(虚拟分页,位置索引-, currentIndex, 上次分页索引-, BaseConfig.pagingIndex, 数据范围[ dataS - dataE ])}}//**********************************************************对外方法/*** 初始化*/const Init (_pagingConfig, _data, _callback) {PagingConfig { ...PagingConfig, ..._pagingConfig }Data.dataSource _dataCallbackFn _callbackBaseConfig {triggerTime: 0,triggerTop: 0,voidViewHeight: _data.length * PagingConfig.cardHeight,pagingIndex: -1,dataEnd: -1}virtualPaging()}/*** scroll-view 滚动事件*/const RollEvent (e) {if (Data.dataSource.length PagingConfig.pageSize)return;BaseConfig.triggerTime new Date().getTime()BaseConfig.triggerTop e.detail.scrollTopvirtualPaging()}return {Init, RollEvent}
}export {DataManage as dm
}
test1.js调用 import { dm } from ../../utils/DataManage
const DM dm()
Page({/*** 页面的初始数据*/data: {TestAllData: [],//为了测试位置 对齐voidViewHeight: 0,//虚拟列表高度 viewListTop: 0, //数据列表Top起始位置 viewList: [], //显示的数据},rollEvent(e) {//滚动事件DM.RollEvent(e)},/*** 生命周期函数--监听页面加载*/onLoad(options) {let DataSource []for (var i 0; i 10000; i) {DataSource.push({ sn: i, text: 第 i 个订单 })}this.setData({ TestAllData: DataSource })DM.Init({ debug: true }, DataSource, (data) { this.setData(data)})}
}) test1.wxml 布局 view classcontainerview styleposition: fixed; top: 0; background-color: blueviolet; width: 100%; height: 25px; z-index: 999; navigator url/pages/order/order订单/navigator/viewview stylemargin-top:25px ; scroll-view enhanced scroll-y bindscrollrollEvent styleheight: calc(100vh - 25px);view classvoidView styleheight:{{voidViewHeight}}px;view style height: 55px; align-content: center; color: greenyellow; wx:for{{TestAllData}} wx:keysn{{item.sn }}/view/viewview classdataView styletop:{{viewListTop0?0:viewListTop}}pxview classorderCard wx:for{{viewList}} wx:keysn{{item.sn }} - {{item.text}}/view/view/scroll-view/view
/view
test1.wxss 样式
::-webkit-scrollbar {width: 0;height: 0;color: transparent;
}/* 占位元素 */
.voidView {position: absolute;width: 30px;background-image: url(http://192.168.1.8:808/images/back.png);
}/* 列表容器 */
.dataView {width: 100vw;padding-left: 30px;position: absolute;
}/* 订单卡片 */
.orderCard {height: 50px;background-color: coral;margin: 5px 5px 5px 5px;text-align: center;font-size: 24px;
}
