详解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 相关文章推荐
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
JS正则获取HTML元素的方法
Mar 31 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
在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
第十五节--Zend引擎的发展
2006/11/16 PHP
PHP syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
php查询mysql数据库并将结果保存到数组的方法
2015/03/18 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
Python random模块常用方法
2014/11/03 Python
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
Python实现微信机器人的方法
2019/09/06 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
python FTP编程基础入门
2021/02/27 Python
后勤部长岗位职责
2013/12/14 职场文书
2014年医务科工作总结
2014/12/18 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
朋友离别感言
2015/08/04 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
导游词书写之黄山
2019/08/06 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android