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

21 篇文章 1 订阅
16 篇文章 2 订阅

表现

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

解决方案

  1. 打开 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);

希望官方早日修复,参考:
使用脏检查优化每次更新数据时都会传输大量数据的问题, 解决删除回退, 列表忽然滚动到顶部等问题

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值