表现

设置了scroll-top的scroll-view组件,在组件所在vue实例data发生改变时会自动回弹到最上方

解决方案

打开 node_modules/mpvue/index.js, 在任意位置添加以下两个方法

function calcDiff(holder, key, newObj, oldObj) {
 if (newObj === oldObj || newObj === undefined) {
  return
 }

 if (newObj == null || oldObj == null || typeof newObj !== typeof oldObj) {
  holder[key] = newObj
 } else if (Array.isArray(newObj) && Array.isArray(oldObj)) {
  if (newObj.length === oldObj.length) {
   for (var i = 0, len = newObj.length; i < len; ++i) {
    calcDiff(holder, key + '[' + i + ']', newObj[i], oldObj[i])
   }
  } else {
   holder[key] = newObj
  }
 } else if (typeof newObj === 'object' && typeof oldObj === 'object') {
  var newKeys = Object.keys(newObj)
  var oldKeys = Object.keys(oldObj)

  if (newKeys.length !== oldKeys.length) {
   holder[key] = newObj
  } else {
   var allKeysSet = Object.create(null)
   for (var i = 0, len = newKeys.length; i < len; ++i) {
    allKeysSet[newKeys[i]] = true
    allKeysSet[oldKeys[i]] = true
   }
   if (Object.keys(allKeysSet).length !== newKeys.length) {
    holder[key] = newObj
   } else {
    for (var i = 0, len = newKeys.length; i < len; ++i) {
     var k = newKeys[i]
     calcDiff(holder, key + '.' + k, newObj[k], oldObj[k])
    }
   }
  }
 } else if (newObj !== oldObj) {
  holder[key] = newObj
 }
}

function diff(newObj, oldObj) {
 var keys = Object.keys(newObj)
 var diffResult = {}
 for (var i = 0, len = keys.length; i < len; ++i) {
  var k = keys[i]
  var oldKeyPath = k.split('.')
  var oldValue = oldObj[oldKeyPath[0]]
  for (var j = 1, jlen = oldKeyPath.length; j < jlen && oldValue !== undefined; ++j) {
   oldValue = oldValue[oldKeyPath[j]]
  }
  calcDiff(diffResult, k, newObj[k], oldValue)
 }
 return diffResult
} 

2.找到 throttleSetData 修改为

var throttleSetData = throttle(function (page, data) {
 page.setData(diff(data, page.data));
}, 50); 

3.找到 updateDataToMP 方法, 将 throttleSetData 的调用方式改为

throttleSetData(page, data);

希望官方早日修复,参考:

使用脏检查优化每次更新数据时都会传输大量数据的问题, 解决删除回退, 列表忽然滚动到顶部等问题

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
mpvue,scroll-view回弹,scroll-view自动回弹

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“详解mpvue scroll-view自动回弹bug解决方案”

暂无“详解mpvue scroll-view自动回弹bug解决方案”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。