詳解mpvue scroll-view自動回彈bug解決方案
更新時間：2018年10月01日 10:14:55 作者：衛(wèi)夫子
設(shè)置了scroll-top的scroll-view組件，在組件所在vue實例data發(fā)生改變時會自動回彈到最上方，非常具有實用價值，需要的朋友可以參考下
表現(xiàn)
設(shè)置了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);
希望官方早日修復(fù)，參考：
使用臟檢查優(yōu)化每次更新數(shù)據(jù)時都會傳輸大量數(shù)據(jù)的問題, 解決刪除回退, 列表忽然滾動到頂部等問題
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Vue入門的相關(guān)資料，是一篇超完整的Vue入門教程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
本篇文章主要介紹了Vue-cli代理解決跨域問題，詳細(xì)的介紹了Vue如何設(shè)置代理，具有一定參考價值，有興趣的可以了解一下2017-09-09
proxy代理不生效以及vue?config.js不生效解決方法
在開發(fā)Vue項目過程中,使用了Proxy代理進行數(shù)據(jù)劫持,但是在實際運行過程中發(fā)現(xiàn)代理并沒有生效,也就是說數(shù)據(jù)并沒有被劫持,這篇文章主要給大家介紹了關(guān)于proxy代理不生效以及vue?config.js不生效解決方法的相關(guān)資料,需要的朋友可以參考下2023-11-11
這篇文章主要給大家介紹了關(guān)于vue中組件的3種使用方式，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了如何給element添加一個抽屜組件的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要為大家詳細(xì)介紹了如何利用Vue自定義實現(xiàn)一個消息通知組件,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,有需要的小伙伴可以參考下2024-03-03
vue+iview 兼容IE11瀏覽器的實現(xiàn)方法
這篇文章主要介紹了vue+iview 兼容IE11瀏覽器的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了vue中如何給多個按鈕動態(tài)添加類名問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要為大家詳細(xì)介紹了vue項目實現(xiàn)分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
文章介紹了在Vue中操作select元素并實時獲取選中的option值的方法,通過使用`@change`事件并傳遞參數(shù),可以實現(xiàn)動態(tài)獲取選中的值2025-01-01