小程序页面中间选项卡点击闪屏优化方案-技术论坛-技术-6KE论坛-综合开放交流论坛

小程序页面中间选项卡点击闪屏优化方案

他不过随手给你一朵花,你却红了脸想用余生做代价。你是我穷极一生都没有做完的梦,而我是你一念之间穿过的风

 

灵沐小程序中间有一个选项卡点击切换可以看其他分类的内容,他存在一个点击出现卡顿和闪屏问题

20240712132528611-image

 

为什么会出现闪屏?是因为我们点击选项卡后需要清空数据,导致下方没有内容高度无法撑开

这种最好的方案是使用虚拟列表(长列表);他能完美解决循环读取数据,防止数据过多导致界面渲染出问题;还能通过他的虚拟列表在点击不出现闪屏等问题

而这不是枫瑞可以手搓的插件

20240712132539421-image

 

既然如此把问题缩小,我们想解决的无非就是点击选项卡后,没有内容高度无法撑开

 

方案

思考过给他一个动态的高度,高度他需要在点击选项卡后保留,且其他选项卡滑动或者加载下一页合并数据需要重新赋值,赋值期间让容器有一个默认auto的高度


Math.ceil(列表length * 容器高度  / 2 )

 

后面在继续探索中发现,只需要对pageScrollTo接口做一个循序调整即可

思路就是点击选项后想先触发pageScrollTo滚动指定位置的返回函数中执行数据加载函数

 


wx.pageScrollTo({
  scrollTop: 0,
  duration: 300,
  success:()=>{
    this.activeList();
  }
})
© 免责声明

请登录后发表评论

    没有评论内容