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

 更新时间:2018年10月01日 10:14:55   作者:卫夫子  
设置了scroll-top的scroll-view组件,在组件所在vue实例data发生改变时会自动回弹到最上方,非常具有实用价值,需要的朋友可以参考下

表现

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

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

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

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

相关文章

  • 深入理解vue Render函数

    深入理解vue Render函数

    本篇文章主要介绍了深入理解vue Render函数,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • vue使用动态组件实现TAB切换效果

    vue使用动态组件实现TAB切换效果

    这篇文章主要介绍了vue使用动态组件实现TAB切换效果的方法,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-05-05
  • 一次VUE项目中遇到XSS攻击的实战记录

    一次VUE项目中遇到XSS攻击的实战记录

    XSS 攻击是页面被注入了恶意的代码,下面这篇文章主要给大家介绍了一次VUE项目中遇到XSS攻击的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2021-12-12
  • VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法

    VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法

    在开发中,需要表格控件根据浏览器高度进行调整,固定表头,本文主要介绍了VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法,非常具有实用价值,需要的朋友可以参考下
    2018-11-11
  • Vue3 封装回到顶部组件的实现示例

    Vue3 封装回到顶部组件的实现示例

    回到顶部在很多网页中都可以见到,本文主要介绍了Vue3 封装回到顶部组件的实现示例,文中根据实例编码详细介绍的十分详尽,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue2.0实现组件之间数据交互和通信操作示例

    Vue2.0实现组件之间数据交互和通信操作示例

    这篇文章主要介绍了Vue2.0实现组件之间数据交互和通信操作,结合实例形式分析了vue2.0组件之间通信的原理、实现方法及相关操作注意事项,需要的朋友可以参考下
    2019-05-05
  • Vue中$bus的用法及$on、$off的使用说明

    Vue中$bus的用法及$on、$off的使用说明

    这篇文章主要介绍了Vue中$bus的用法及$on、$off的使用说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 解决vue单页面应用中动态修改title问题

    解决vue单页面应用中动态修改title问题

    这篇文章主要介绍了解决vue单页面应用中动态修改title问题,本文通过示例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • Vue3学习之表单的使用示例详解

    Vue3学习之表单的使用示例详解

    这篇文章主要为大家详细介绍了Vue3中表单的使用的相关知识,文中的示例代码讲解详细,对我们掌握Vue3有一定的帮助,感兴趣的小伙伴可以跟随小编一起学习一下
    2022-12-12
  • vue项目开启gzip压缩功能简单实例

    vue项目开启gzip压缩功能简单实例

    这篇文章主要给大家介绍了关于vue项目开启gzip压缩功能的相关资料,gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07

最新评论