溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發(fā)布時間:2020-09-11 20:43:19 來源:腳本之家 閱讀:214 作者:衛(wèi)夫子 欄目:web開發(fā)

表現(xiàn)

設置了scroll-top的scroll-view組件,在組件所在vue實例data發(fā)生改變時會自動回彈到最上方

解決方案

打開 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 的調(diào)用方式改為

throttleSetData(page, data);

希望官方早日修復,參考:

使用臟檢查優(yōu)化每次更新數(shù)據(jù)時都會傳輸大量數(shù)據(jù)的問題, 解決刪除回退, 列表忽然滾動到頂部等問題

 以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI