z***@126.com
z***@126.com
  • 发布:2021-10-20 12:05
  • 更新:2022-06-17 16:04
  • 阅读:855

【报Bug】nvue 渲染列表速度慢 切换数据的时候 出现明显的回收旧数据的过程,耗时长

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: mac 11.2.3

HBuilderX类型: Alpha

HBuilderX版本号: 3.2.10

手机系统: 全部

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

测试过的手机:

iphone 12 mini、oppo、华为

操作步骤:

运行到安卓,切换分类,等待列表渲染,

预期结果:

运行到安卓,切换分类,等待列表渲染,迅速切换成新数据

实际结果:

旧列表数据呈现一条一条往上递归到过程,最后闪现出新数据

bug描述:

nvue 渲染列表 切换数据的时候 出现明显的回收旧数据的过程,约5-10秒后才展现新数据,在数据多的时候尤为明显,每次必现,偶尔正常,苹果手机相对正常一些,只有数据多的时候出现,安卓机型几乎每次都必现,之前因为是list、cell导致的,后期改成普通的view 循环 还是出现,将数据置空也有同样的问题

2021-10-20 12:05 负责人:无 分享
已邀请:
z***@126.com

z***@126.com (作者) - 没有

还有个问题,应该还是类似的,nvue list 循环cell ,onshow里写重新加载接口渲染数据,当数据加载分页的时候,点击跳出页面,再回来触发onShow的时候,页面卡死 直接app崩溃跳出

z***@126.com

z***@126.com (作者) - 没有

还有此次更新完之后。flex-direction为row,一个父元素包含两个子元素,如果其中一个子元素文字比较多,会分两行显示,父元素上写上flex-wrap:nowrap;样式,整个无法再折行

  • z***@126.com (作者)

    这里还必须指定一个宽度才行

    2021-10-21 15:44

z***@126.com

z***@126.com (作者) - 没有

https://v.youku.com/v_show/id_XNTgxNTMyOTg2MA==.html

z***@126.com

z***@126.com (作者) - 没有

https://v.youku.com/v_show/id_XNTgxNTMyOTg2MA==.html
这个是那个bug的录频

z***@126.com

z***@126.com (作者) - 没有

没有人有这个问题吗,以前的版本都没问题,就最近更新的几个版本之后,特别诡异!

z***@126.com

z***@126.com (作者) - 没有

在页面渲染回收旧数据期间。什么都点不了,我如果点击返回,是要等这个过程处理完,才会去触发返回

Ramsey

Ramsey

在manifest.json中改成 "nvueStyleCompiler" : "weex" 就不会有这个问题

像素方舟_青阳

像素方舟_青阳

  1. 升级到 3.2.12 正式版
  2. 点击筛选后,先执行滚动到list顶部,再查询,效果会好很多,目前推测是 cell 自动回收机制阻塞
  3. 我项目是纯 nvue,基本都是list cell,目前测试看安卓已经好很多了
await scrollToRef(this.$refs.top, 0, false) // 跳至顶部,无动画  
this.onFetch(filter) // 执行筛选 
const dom = weex.requireModule('dom')  

/**  
 * 让页面滚动到 ref 对应的组件  
 * @param {object} ref - 节点引用  
 * @param {number} offset - 到其可见位置的偏移距离,默认是 0  
 * @param {boolean} animated - 是否执行动画,默认是 true  
 */  
export async function scrollToRef(ref, offset = 0, animated = true) {  
  try {  
    dom.scrollToElement(ref, { offset, animated });  
    await sleep(25) // 等待25ms,经验值,避免安卓下异常  
  } catch (e) { }  
}  

/**  
 * 休眠一段时间  
 * @param {number}} ms 毫秒数  
 */  
export function sleep(ms) {  
  return new Promise(resolve => setTimeout(resolve, ms))  
}
1***@qq.com

1***@qq.com

你好这个问题有解决么

要回复问题请先登录注册