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


Posted in Javascript onOctober 01, 2018

表现

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

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

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

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

Javascript 相关文章推荐
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
jquery 插件 人性化的消息显示
Jan 21 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
javascript中expression的用法整理
May 13 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
小程序实现搜索框
Jun 19 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
在create-react-app中使用sass的方法示例
Oct 01 #Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 #Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 #Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 #Javascript
angularJs中$scope数据序列化的实例
Sep 30 #Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 #Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 #Javascript
You might like
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
JavaScript 撑出页面文字换行
2009/06/15 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
python实现画圆功能
2018/01/25 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
django admin 添加自定义链接方式
2020/03/11 Python
Python通过format函数格式化显示值
2020/10/17 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
私有程序集与共享程序集有什么区别
2013/04/05 面试题
J2EE包括哪些技术
2016/11/25 面试题
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
廉洁使者实施方案
2014/03/29 职场文书
秋季运动会开幕词
2015/01/28 职场文书
先进个人总结范文
2015/02/15 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
放假通知怎么写
2015/08/18 职场文书
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android