欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解mpvue scroll-view自动回弹bug解决方案

程序员文章站 2022-03-20 15:14:10
表现 设置了scroll-top的scroll-view组件,在组件所在vue实例data发生改变时会自动回弹到最上方 解决方案 打开 node_modules/mp...

表现

设置了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);

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

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

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