1. 程式人生 > >mpvue scroll-view自動回彈bug解決方案

mpvue scroll-view自動回彈bug解決方案

表現

設定了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);